skeleton for raw trace data

stubs/tx.ts

+import type { RawTracesResponse } from 'types/api/rawTrace';
 import type { Transaction, TransactionsResponse } from 'types/api/transaction';
 
 import { ADDRESS_PARAMS } from './addressParams';
@@ -58,3 +59,5 @@ export const TXS: TransactionsResponse = {
     filter: 'validated',
   },
 };
+
+export const TX_RAW_TRACE: RawTracesResponse = [];

ui/tx/TxRawTrace.tsx

-import { Flex, Skeleton } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -10,6 +9,7 @@ import { SECOND } from 'lib/consts';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
+import { TX_RAW_TRACE } from 'stubs/tx';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import RawDataSnippet from 'ui/shared/RawDataSnippet';
 import TxPendingAlert from 'ui/tx/TxPendingAlert';
@@ -23,10 +23,11 @@ const TxRawTrace = () => {
   const hash = getQueryParamString(router.query.hash);
 
   const txInfo = useFetchTxInfo({ updateDelay: 5 * SECOND });
-  const { data, isLoading, isError } = useApiQuery('tx_raw_trace', {
+  const { data, isPlaceholderData, isError } = useApiQuery('tx_raw_trace', {
     pathParams: { hash },
     queryOptions: {
       enabled: Boolean(hash) && Boolean(txInfo.data?.status) && isSocketOpen,
+      placeholderData: TX_RAW_TRACE,
     },
   });
 
@@ -36,7 +37,7 @@ const TxRawTrace = () => {
 
   const channel = useSocketChannel({
     topic: `transactions:${ hash }`,
-    isDisabled: !hash || !txInfo.data?.status,
+    isDisabled: !hash || !txInfo.isPlaceholderData || !txInfo.data?.status,
     onJoin: () => setIsSocketOpen(true),
   });
   useSocketMessage({
@@ -45,7 +46,7 @@ const TxRawTrace = () => {
     handler: handleRawTraceMessage,
   });
 
-  if (!txInfo.isLoading && !txInfo.isError && !txInfo.data.status) {
+  if (!txInfo.isLoading && !txInfo.isPlaceholderData && !txInfo.isError && !txInfo.data.status) {
     return txInfo.socketStatus ? <TxSocketAlert status={ txInfo.socketStatus }/> : <TxPendingAlert/>;
   }
 
@@ -53,26 +54,15 @@ const TxRawTrace = () => {
     return <DataFetchAlert/>;
   }
 
-  if (isLoading || txInfo.isLoading) {
-    return (
-      <>
-        <Flex justifyContent="end" mb={ 2 }>
-          <Skeleton w={ 5 } h={ 5 }/>
-        </Flex>
-        <Skeleton w="100%" h="500px"/>
-      </>
-    );
-  }
-
   const dataToDisplay = rawTraces ? rawTraces : data;
 
-  if (dataToDisplay.length === 0) {
+  if (!isPlaceholderData && dataToDisplay?.length === 0) {
     return <span>No trace entries found.</span>;
   }
 
   const text = JSON.stringify(dataToDisplay, undefined, 4);
 
-  return <RawDataSnippet data={ text }/>;
+  return <RawDataSnippet data={ text } isLoading={ isPlaceholderData }/>;
 };
 
 export default TxRawTrace;