skeletons for logs

stubs/log.ts

+import type { Log, LogsResponseAddress, LogsResponseTx } from 'types/api/log';
+
+import { ADDRESS_PARAMS } from './addressParams';
+import { TX_HASH } from './tx';
+
+export const LOG: Log = {
+  address: ADDRESS_PARAMS,
+  data: '0x000000000000000000000000000000000000000000000000000000d75e4be200',
+  decoded: null,
+  index: 42,
+  topics: [
+    '0x8c5be1e5ebec7d5bd14f71427d1e84f3dd0314c0f7b2291e5b200ac8c7c3b925',
+    '0x000000000000000000000000c52ea157a7fb3e25a069d47df0428ac70cd656b1',
+    '0x000000000000000000000000302fd86163cb9ad5533b3952dafa3b633a82bc51',
+    null,
+  ],
+  tx_hash: TX_HASH,
+};
+
+export const TX_LOGS: LogsResponseTx = {
+  items: Array(3).fill(LOG),
+  next_page_params: null,
+};
+
+export const ADDRESS_LOGS: LogsResponseAddress = {
+  items: Array(3).fill(LOG),
+  next_page_params: {
+    block_number: 9005750,
+    index: 42,
+    items_count: 50,
+    transaction_index: 23,
+  },
+};

types/api/log.ts

@@ -16,7 +16,7 @@ export interface LogsResponseTx {
     index: number;
     items_count: number;
     transaction_hash: string;
-  };
+  } | null;
 }
 
 export interface LogsResponseAddress {
@@ -26,5 +26,5 @@ export interface LogsResponseAddress {
     items_count: number;
     transaction_index: number;
     block_number: number;
-  };
+  } | null;
 }

ui/address/AddressLogs.tsx

@@ -3,20 +3,23 @@ import React from 'react';
 
 import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import getQueryParamString from 'lib/router/getQueryParamString';
+import { ADDRESS_LOGS } from 'stubs/log';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import LogItem from 'ui/shared/logs/LogItem';
-import LogSkeleton from 'ui/shared/logs/LogSkeleton';
 import Pagination from 'ui/shared/Pagination';
 
 const AddressLogs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivElement>}) => {
   const router = useRouter();
 
   const hash = getQueryParamString(router.query.hash);
-  const { data, isLoading, isError, pagination, isPaginationVisible } = useQueryWithPages({
+  const { data, isPlaceholderData, isError, pagination, isPaginationVisible } = useQueryWithPages({
     resourceName: 'address_logs',
     pathParams: { hash },
     scrollRef,
+    options: {
+      placeholderData: ADDRESS_LOGS,
+    },
   });
 
   const actionBar = isPaginationVisible ? (
@@ -25,19 +28,17 @@ const AddressLogs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivElement>
     </ActionBar>
   ) : null;
 
-  const content = data?.items ? data.items.map((item, index) => <LogItem key={ index } { ...item } type="address"/>) : null;
-
-  const skeleton = <><LogSkeleton/><LogSkeleton/></>;
+  const content = data?.items ? data.items.map((item, index) => <LogItem key={ index } { ...item } type="address" isLoading={ isPlaceholderData }/>) : null;
 
   return (
     <DataListDisplay
       isError={ isError }
-      isLoading={ isLoading }
+      isLoading={ false }
       items={ data?.items }
       emptyText="There are no logs for this address."
       content={ content }
       actionBar={ actionBar }
-      skeletonProps={{ customSkeleton: skeleton }}
+      skeletonProps={{ customSkeleton: null }}
     />
   );
 };

ui/shared/logs/LogItem.tsx

-import { Text, Grid, GridItem, Tooltip, Button, useColorModeValue, Alert, Link } from '@chakra-ui/react';
+import { Grid, GridItem, Tooltip, Button, useColorModeValue, Alert, Link, Skeleton } from '@chakra-ui/react';
 import { route } from 'nextjs-routes';
 import React from 'react';
 
@@ -14,15 +14,16 @@ import LogTopic from 'ui/shared/logs/LogTopic';
 
 type Props = Log & {
   type: 'address' | 'transaction';
+  isLoading?: boolean;
 };
 
-const RowHeader = ({ children }: { children: React.ReactNode }) => (
+const RowHeader = ({ children, isLoading }: { children: React.ReactNode; isLoading?: boolean }) => (
   <GridItem _notFirst={{ my: { base: 4, lg: 0 } }}>
-    <Text fontWeight={ 500 }>{ children }</Text>
+    <Skeleton fontWeight={ 500 } isLoaded={ !isLoading } display="inline-block">{ children }</Skeleton>
   </GridItem>
 );
 
-const LogItem = ({ address, index, topics, data, decoded, type, tx_hash: txHash }: Props) => {
+const LogItem = ({ address, index, topics, data, decoded, type, tx_hash: txHash, isLoading }: Props) => {
 
   const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
   const dataBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
@@ -50,14 +51,15 @@ const LogItem = ({ address, index, topics, data, decoded, type, tx_hash: txHash
           </Alert>
         </GridItem>
       ) }
-      { hasTxInfo ? <RowHeader>Transaction</RowHeader> : <RowHeader>Address</RowHeader> }
+      { hasTxInfo ? <RowHeader isLoading={ isLoading }>Transaction</RowHeader> : <RowHeader isLoading={ isLoading }>Address</RowHeader> }
       <GridItem display="flex" alignItems="center">
         <Address mr={{ base: 9, lg: 0 }}>
-          { !hasTxInfo && <AddressIcon address={ address } mr={ 2 }/> }
+          { !hasTxInfo && <AddressIcon address={ address } mr={ 2 } isLoading={ isLoading }/> }
           <AddressLink
             hash={ hasTxInfo ? txHash : address.hash }
             alias={ hasTxInfo ? undefined : address.name }
             type={ type === 'address' ? 'transaction' : 'address' }
+            isLoading={ isLoading }
           />
         </Address>
         { /* api doesn't have find topic feature yet */ }
@@ -66,11 +68,13 @@ const LogItem = ({ address, index, topics, data, decoded, type, tx_hash: txHash
             <Icon as={ searchIcon } boxSize={ 5 }/>
           </Link>
         </Tooltip> */ }
-        <Tooltip label="Log index">
-          <Button variant="outline" colorScheme="gray" isActive ml="auto" size="sm" fontWeight={ 400 }>
-            { index }
-          </Button>
-        </Tooltip>
+        <Skeleton isLoaded={ !isLoading } ml="auto" borderRadius="base">
+          <Tooltip label="Log index">
+            <Button variant="outline" colorScheme="gray" isActive size="sm" fontWeight={ 400 }>
+              { index }
+            </Button>
+          </Tooltip>
+        </Skeleton>
       </GridItem>
       { decoded && (
         <>
@@ -80,20 +84,21 @@ const LogItem = ({ address, index, topics, data, decoded, type, tx_hash: txHash
           </GridItem>
         </>
       ) }
-      <RowHeader>Topics</RowHeader>
+      <RowHeader isLoading={ isLoading }>Topics</RowHeader>
       <GridItem>
         { topics.filter(Boolean).map((item, index) => (
           <LogTopic
             key={ index }
             hex={ item }
             index={ index }
+            isLoading={ isLoading }
           />
         )) }
       </GridItem>
-      <RowHeader>Data</RowHeader>
-      <GridItem p={ 4 } fontSize="sm" borderRadius="md" bgColor={ dataBgColor }>
+      <RowHeader isLoading={ isLoading }>Data</RowHeader>
+      <Skeleton isLoaded={ !isLoading } p={ 4 } fontSize="sm" borderRadius="md" bgColor={ isLoading ? undefined : dataBgColor }>
         { data }
-      </GridItem>
+      </Skeleton>
     </Grid>
   );
 };

ui/shared/logs/LogSkeleton.tsx

-import { Flex, Grid, GridItem, Skeleton, SkeletonCircle, useColorModeValue } from '@chakra-ui/react';
-import React from 'react';
-
-const RowHeader = () => (
-  <GridItem _notFirst={{ my: { base: 4, lg: 0 } }} _first={{ alignSelf: 'center' }}>
-    <Skeleton h={ 6 } borderRadius="full" w="150px"/>
-  </GridItem>
-);
-
-const TopicRow = () => (
-  <Flex columnGap={ 3 }>
-    <SkeletonCircle size="6"/>
-    <Skeleton h={ 6 } w="70px" borderRadius="full"/>
-    <Skeleton h={ 6 } flexGrow={ 1 } borderRadius="full"/>
-  </Flex>
-);
-
-const LogSkeleton = () => {
-  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
-
-  return (
-    <Grid
-      gap={{ base: 2, lg: 8 }}
-      templateColumns={{ base: '1fr', lg: '200px 1fr' }}
-      py={ 8 }
-      _notFirst={{
-        borderTopWidth: '1px',
-        borderTopColor: borderColor,
-      }}
-      _first={{
-        pt: 0,
-      }}
-    >
-      <RowHeader/>
-      <GridItem display="flex" alignItems="center">
-        <SkeletonCircle size="6"/>
-        <Skeleton h={ 6 } flexGrow={ 1 } borderRadius="full" ml={ 2 } mr={ 9 }/>
-        <Skeleton h={ 8 } w={ 8 } borderRadius="base"/>
-      </GridItem>
-      <RowHeader/>
-      <GridItem>
-        <Skeleton h="150px" w="100%" borderRadius="base"/>
-      </GridItem>
-      <RowHeader/>
-      <GridItem display="flex" flexDir="column" rowGap={ 3 }>
-        <TopicRow/>
-        <TopicRow/>
-        <TopicRow/>
-      </GridItem>
-      <RowHeader/>
-      <GridItem>
-        <Skeleton h="60px" w="100%" borderRadius="base"/>
-      </GridItem>
-    </Grid>
-  );
-};
-
-export default LogSkeleton;

ui/shared/logs/LogTopic.tsx

-import { Flex, Button, Select, Box } from '@chakra-ui/react';
+import { Flex, Button, Select, Skeleton } from '@chakra-ui/react';
 import capitalize from 'lodash/capitalize';
 import React from 'react';
 
@@ -12,6 +12,7 @@ import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 interface Props {
   hex: string;
   index: number;
+  isLoading?: boolean;
 }
 
 type DataType = 'hex' | 'text' | 'address' | 'number';
@@ -24,7 +25,7 @@ const VALUE_CONVERTERS: Record<DataType, (hex: string) => string> = {
 };
 const OPTIONS: Array<DataType> = [ 'hex', 'address', 'text', 'number' ];
 
-const LogTopic = ({ hex, index }: Props) => {
+const LogTopic = ({ hex, index, isLoading }: Props) => {
   const [ selectedDataType, setSelectedDataType ] = React.useState<DataType>('hex');
 
   const handleSelectChange = React.useCallback((event: React.ChangeEvent<HTMLSelectElement>) => {
@@ -40,10 +41,10 @@ const LogTopic = ({ hex, index }: Props) => {
       case 'text': {
         return (
           <>
-            <Box overflow="hidden" whiteSpace="nowrap">
+            <Skeleton isLoaded={ !isLoading } overflow="hidden" whiteSpace="nowrap">
               <HashStringShortenDynamic hash={ value }/>
-            </Box>
-            <CopyToClipboard text={ value }/>
+            </Skeleton>
+            <CopyToClipboard text={ value } isLoading={ isLoading }/>
           </>
         );
       }
@@ -51,8 +52,8 @@ const LogTopic = ({ hex, index }: Props) => {
       case 'address': {
         return (
           <Address>
-            <AddressLink type="address" hash={ value }/>
-            <CopyToClipboard text={ value }/>
+            <AddressLink type="address" hash={ value } isLoading={ isLoading }/>
+            <CopyToClipboard text={ value } isLoading={ isLoading }/>
           </Address>
         );
       }
@@ -61,22 +62,24 @@ const LogTopic = ({ hex, index }: Props) => {
 
   return (
     <Flex alignItems="center" px={{ base: 0, lg: 3 }} _notFirst={{ mt: 3 }} overflow="hidden" maxW="100%">
-      <Button variant="outline" colorScheme="gray" isActive size="xs" fontWeight={ 400 } mr={ 3 } w={ 6 }>
-        { index }
-      </Button>
+      <Skeleton isLoaded={ !isLoading } mr={ 3 } borderRadius="base">
+        <Button variant="outline" colorScheme="gray" isActive size="xs" fontWeight={ 400 } w={ 6 }>
+          { index }
+        </Button>
+      </Skeleton>
       { index !== 0 && (
-        <Select
-          size="xs"
-          borderRadius="base"
-          value={ selectedDataType }
-          onChange={ handleSelectChange }
-          mr={ 3 }
-          flexShrink={ 0 }
-          w="auto"
-          aria-label="Data type"
-        >
-          { OPTIONS.map((option) => <option key={ option } value={ option }>{ capitalize(option) }</option>) }
-        </Select>
+        <Skeleton isLoaded={ !isLoading } mr={ 3 } flexShrink={ 0 } borderRadius="base">
+          <Select
+            size="xs"
+            borderRadius="base"
+            value={ selectedDataType }
+            onChange={ handleSelectChange }
+            w="auto"
+            aria-label="Data type"
+          >
+            { OPTIONS.map((option) => <option key={ option } value={ option }>{ capitalize(option) }</option>) }
+          </Select>
+        </Skeleton>
       ) }
       { content }
     </Flex>

ui/tx/TxLogs.tsx

@@ -3,10 +3,10 @@ import React from 'react';
 
 import { SECOND } from 'lib/consts';
 import useQueryWithPages from 'lib/hooks/useQueryWithPages';
+import { TX_LOGS } from 'stubs/log';
 import ActionBar from 'ui/shared/ActionBar';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import LogItem from 'ui/shared/logs/LogItem';
-import LogSkeleton from 'ui/shared/logs/LogSkeleton';
 import Pagination from 'ui/shared/Pagination';
 import TxPendingAlert from 'ui/tx/TxPendingAlert';
 import TxSocketAlert from 'ui/tx/TxSocketAlert';
@@ -14,15 +14,16 @@ import useFetchTxInfo from 'ui/tx/useFetchTxInfo';
 
 const TxLogs = () => {
   const txInfo = useFetchTxInfo({ updateDelay: 5 * SECOND });
-  const { data, isLoading, isError, pagination, isPaginationVisible } = useQueryWithPages({
+  const { data, isPlaceholderData, isError, pagination, isPaginationVisible } = useQueryWithPages({
     resourceName: 'tx_logs',
     pathParams: { hash: txInfo.data?.hash },
     options: {
-      enabled: Boolean(txInfo.data?.hash) && Boolean(txInfo.data?.status),
+      enabled: !txInfo.isPlaceholderData && Boolean(txInfo.data?.hash) && Boolean(txInfo.data?.status),
+      placeholderData: TX_LOGS,
     },
   });
 
-  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/>;
   }
 
@@ -30,16 +31,7 @@ const TxLogs = () => {
     return <DataFetchAlert/>;
   }
 
-  if (isLoading || txInfo.isLoading) {
-    return (
-      <Box>
-        <LogSkeleton/>
-        <LogSkeleton/>
-      </Box>
-    );
-  }
-
-  if (data.items.length === 0) {
+  if (!data?.items.length) {
     return <Text as="span">There are no logs for this transaction.</Text>;
   }
 
@@ -50,7 +42,7 @@ const TxLogs = () => {
           <Pagination ml="auto" { ...pagination }/>
         </ActionBar>
       ) }
-      { data.items.map((item, index) => <LogItem key={ index } { ...item } type="transaction"/>) }
+      { data?.items.map((item, index) => <LogItem key={ index } { ...item } type="transaction" isLoading={ isPlaceholderData }/>) }
     </Box>
   );
 };