skeletons for coin balance history

stubs/address.ts

-import type { Address, AddressCounters } from 'types/api/address';
+import type { Address, AddressCoinBalanceHistoryItem, AddressCounters } from 'types/api/address';
 import type { AddressesItem } from 'types/api/addresses';
 
 import { ADDRESS_HASH } from './addressParams';
 import { TOKEN_INFO_ERC_20 } from './token';
+import { TX_HASH } from './tx';
 
 export const ADDRESS_INFO: Address = {
   block_number_balance_updated_at: 8774377,
@@ -53,3 +54,11 @@ export const TOP_ADDRESS: AddressesItem = {
   public_tags: [ ],
   watchlist_names: [],
 };
+
+export const ADDRESS_COIN_BALANCE: AddressCoinBalanceHistoryItem = {
+  block_number: 9004413,
+  block_timestamp: '2023-05-15T13:16:24Z',
+  delta: '1000000000000000000',
+  transaction_hash: TX_HASH,
+  value: '953427250000000000000000',
+};

ui/address/AddressCoinBalance.tsx

@@ -10,6 +10,8 @@ import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
+import { ADDRESS_COIN_BALANCE } from 'stubs/address';
+import { generateListStub } from 'stubs/utils';
 import SocketAlert from 'ui/shared/SocketAlert';
 
 import AddressCoinBalanceChart from './coinBalance/AddressCoinBalanceChart';
@@ -26,6 +28,18 @@ const AddressCoinBalance = () => {
     resourceName: 'address_coin_balance',
     pathParams: { hash: addressHash },
     scrollRef,
+    options: {
+      placeholderData: generateListStub<'address_coin_balance'>(
+        ADDRESS_COIN_BALANCE,
+        50,
+        {
+          next_page_params: {
+            block_number: 8009880,
+            items_count: 50,
+          },
+        },
+      ),
+    },
   });
 
   const handleSocketError = React.useCallback(() => {
@@ -56,7 +70,7 @@ const AddressCoinBalance = () => {
     topic: `addresses:${ addressHash.toLowerCase() }`,
     onSocketClose: handleSocketError,
     onSocketError: handleSocketError,
-    isDisabled: !addressHash || coinBalanceQuery.pagination.page !== 1,
+    isDisabled: !addressHash || coinBalanceQuery.isPlaceholderData || coinBalanceQuery.pagination.page !== 1,
   });
   useSocketMessage({
     channel,

ui/address/coinBalance/AddressCoinBalanceHistory.tsx

@@ -37,15 +37,25 @@ const AddressCoinBalanceHistory = ({ query }: Props) => {
             </Tr>
           </Thead>
           <Tbody>
-            { query.data.items.map((item) => (
-              <AddressCoinBalanceTableItem key={ item.block_number } { ...item } page={ query.pagination.page }/>
+            { query.data.items.map((item, index) => (
+              <AddressCoinBalanceTableItem
+                key={ item.block_number + (query.isPlaceholderData ? String(index) : '') }
+                { ...item }
+                page={ query.pagination.page }
+                isLoading={ query.isPlaceholderData }
+              />
             )) }
           </Tbody>
         </Table>
       </Hide>
       <Show below="lg" ssr={ false }>
-        { query.data.items.map((item) => (
-          <AddressCoinBalanceListItem key={ item.block_number } { ...item } page={ query.pagination.page }/>
+        { query.data.items.map((item, index) => (
+          <AddressCoinBalanceListItem
+            key={ item.block_number + (query.isPlaceholderData ? String(index) : '') }
+            { ...item }
+            page={ query.pagination.page }
+            isLoading={ query.isPlaceholderData }
+          />
         )) }
       </Show>
     </>
@@ -61,7 +71,7 @@ const AddressCoinBalanceHistory = ({ query }: Props) => {
     <DataListDisplay
       mt={ 8 }
       isError={ query.isError }
-      isLoading={ query.isLoading }
+      isLoading={ false }
       items={ query.data?.items }
       skeletonProps={{ skeletonDesktopColumns: [ '25%', '25%', '25%', '25%', '120px' ] }}
       emptyText="There is no coin balance history for this address."

ui/address/coinBalance/AddressCoinBalanceListItem.tsx

-import { Text, Stat, StatHelpText, StatArrow, Flex } from '@chakra-ui/react';
+import { Text, Stat, StatHelpText, StatArrow, Flex, Skeleton } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import { route } from 'nextjs-routes';
 import React from 'react';
@@ -15,6 +15,7 @@ import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 
 type Props = AddressCoinBalanceHistoryItem & {
   page: number;
+  isLoading: boolean;
 };
 
 const AddressCoinBalanceListItem = (props: Props) => {
@@ -26,7 +27,10 @@ const AddressCoinBalanceListItem = (props: Props) => {
   return (
     <ListItemMobile rowGap={ 2 } isAnimated>
       <Flex justifyContent="space-between" w="100%">
-        <Text fontWeight={ 600 }>{ BigNumber(props.value).div(WEI).dp(8).toFormat() } { appConfig.network.currency.symbol }</Text>
+        <Skeleton isLoaded={ !props.isLoading } fontWeight={ 600 }>
+          { BigNumber(props.value).div(WEI).dp(8).toFormat() } { appConfig.network.currency.symbol }
+        </Skeleton>
+        <Skeleton isLoaded={ !props.isLoading }>
           <Stat flexGrow="0">
             <StatHelpText display="flex" mb={ 0 } alignItems="center">
               <StatArrow type={ isPositiveDelta ? 'increase' : 'decrease' }/>
@@ -35,22 +39,25 @@ const AddressCoinBalanceListItem = (props: Props) => {
               </Text>
             </StatHelpText>
           </Stat>
+        </Skeleton>
       </Flex>
       <Flex columnGap={ 2 } w="100%">
-        <Text fontWeight={ 500 } flexShrink={ 0 }>Block</Text>
+        <Skeleton isLoaded={ !props.isLoading } fontWeight={ 500 } flexShrink={ 0 }>Block</Skeleton>
+        <Skeleton isLoaded={ !props.isLoading }>
           <LinkInternal href={ blockUrl } fontWeight="700">{ props.block_number }</LinkInternal>
+        </Skeleton>
       </Flex>
       { props.transaction_hash && (
         <Flex columnGap={ 2 } w="100%">
-          <Text fontWeight={ 500 } flexShrink={ 0 }>Txs</Text>
+          <Skeleton isLoaded={ !props.isLoading } fontWeight={ 500 } flexShrink={ 0 }>Txs</Skeleton>
           <Address maxW="150px" fontWeight="700">
-            <AddressLink hash={ props.transaction_hash } type="transaction"/>
+            <AddressLink hash={ props.transaction_hash } type="transaction" isLoading={ props.isLoading }/>
           </Address>
         </Flex>
       ) }
       <Flex columnGap={ 2 } w="100%">
-        <Text fontWeight={ 500 } flexShrink={ 0 }>Age</Text>
-        <Text variant="secondary">{ timeAgo }</Text>
+        <Skeleton isLoaded={ !props.isLoading } fontWeight={ 500 } flexShrink={ 0 }>Age</Skeleton>
+        <Skeleton isLoaded={ !props.isLoading } variant="secondary">{ timeAgo }</Skeleton>
       </Flex>
     </ListItemMobile>
   );

ui/address/coinBalance/AddressCoinBalanceTableItem.tsx

-import { Td, Tr, Text, Stat, StatHelpText, StatArrow } from '@chakra-ui/react';
+import { Td, Tr, Text, Stat, StatHelpText, StatArrow, Skeleton } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import { route } from 'nextjs-routes';
 import React from 'react';
@@ -13,6 +13,7 @@ import LinkInternal from 'ui/shared/LinkInternal';
 
 type Props = AddressCoinBalanceHistoryItem & {
   page: number;
+  isLoading: boolean;
 };
 
 const AddressCoinBalanceTableItem = (props: Props) => {
@@ -24,24 +25,31 @@ const AddressCoinBalanceTableItem = (props: Props) => {
   return (
     <Tr>
       <Td>
+        <Skeleton isLoaded={ !props.isLoading } display="inline-block">
           <LinkInternal href={ blockUrl } fontWeight="700">{ props.block_number }</LinkInternal>
+        </Skeleton>
       </Td>
       <Td>
         { props.transaction_hash &&
           (
             <Address w="150px" fontWeight="700">
-              <AddressLink hash={ props.transaction_hash } type="transaction"/>
+              <AddressLink hash={ props.transaction_hash } type="transaction" isLoading={ props.isLoading }/>
             </Address>
           )
         }
       </Td>
       <Td>
-        <Text variant="secondary">{ timeAgo }</Text>
+        <Skeleton isLoaded={ !props.isLoading } color="text_secondary" display="inline-block">
+          <span>{ timeAgo }</span>
+        </Skeleton>
       </Td>
       <Td isNumeric pr={ 1 }>
-        <Text>{ BigNumber(props.value).div(WEI).dp(8).toFormat() }</Text>
+        <Skeleton isLoaded={ !props.isLoading } color="text_secondary" display="inline-block">
+          <span>{ BigNumber(props.value).div(WEI).dp(8).toFormat() }</span>
+        </Skeleton>
       </Td>
       <Td isNumeric display="flex" justifyContent="end">
+        <Skeleton isLoaded={ !props.isLoading }>
           <Stat flexGrow="0">
             <StatHelpText display="flex" mb={ 0 } alignItems="center">
               <StatArrow type={ isPositiveDelta ? 'increase' : 'decrease' }/>
@@ -50,6 +58,7 @@ const AddressCoinBalanceTableItem = (props: Props) => {
               </Text>
             </StatHelpText>
           </Stat>
+        </Skeleton>
       </Td>
     </Tr>
   );