separate loader for address counters

types/api/address.ts

@@ -13,6 +13,7 @@ export interface Address {
   creation_tx_hash: string | null;
   exchange_rate: string | null;
   hash: string;
+  has_validated_blocks: boolean;
   implementation_address: string | null;
   implementation_name: string | null;
   is_contract: boolean;

ui/address/AddressDetails.tsx

 import { Box, Flex, Text, Icon, Grid, Link } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
-import BigNumber from 'bignumber.js';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -11,6 +10,7 @@ import blockIcon from 'icons/block.svg';
 import useApiQuery from 'lib/api/useApiQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import link from 'lib/link/link';
+import AddressCounterItem from 'ui/address/details/AddressCounterItem';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
@@ -41,27 +41,20 @@ const AddressDetails = ({ addressQuery }: Props) => {
       enabled: Boolean(router.query.id) && Boolean(addressQuery.data),
     },
   });
-  const tokenBalancesQuery = useApiQuery('address_token_balances', {
-    pathParams: { id: router.query.id?.toString() },
-    queryOptions: {
-      enabled: Boolean(router.query.id) && Boolean(addressQuery.data),
-    },
-  });
 
   if (addressQuery.isError) {
     throw Error('Address fetch error', { cause: addressQuery.error as unknown as Error });
   }
 
-  if (countersQuery.isLoading || addressQuery.isLoading || tokenBalancesQuery.isLoading) {
+  if (addressQuery.isLoading) {
     return <AddressDetailsSkeleton/>;
   }
 
-  if (countersQuery.isError || addressQuery.isError || tokenBalancesQuery.isError) {
+  if (addressQuery.isError) {
     return <DataFetchAlert/>;
   }
 
   const explorers = appConfig.network.explorers.filter(({ paths }) => paths.address);
-  const validationsCount = Number(countersQuery.data.validations_count);
 
   return (
     <Box>
@@ -116,26 +109,26 @@ const AddressDetails = ({ addressQuery }: Props) => {
           title="Transactions"
           hint="Number of transactions related to this address."
         >
-          { Number(countersQuery.data.transactions_count).toLocaleString() }
+          <AddressCounterItem prop="transactions_count" query={ countersQuery }/>
         </DetailsInfoItem>
         <DetailsInfoItem
           title="Transfers"
           hint="Number of transfers to/from this address."
         >
-          { Number(countersQuery.data.token_transfers_count).toLocaleString() }
+          <AddressCounterItem prop="token_transfers_count" query={ countersQuery }/>
         </DetailsInfoItem>
         <DetailsInfoItem
           title="Gas used"
           hint="Gas used by the address."
         >
-          { BigNumber(countersQuery.data.gas_usage_count).toFormat() }
+          <AddressCounterItem prop="gas_usage_count" query={ countersQuery }/>
         </DetailsInfoItem>
-        { !Object.is(validationsCount, NaN) && validationsCount > 0 && (
+        { addressQuery.data.has_validated_blocks && (
           <DetailsInfoItem
             title="Blocks validated"
             hint="Number of blocks validated by this validator."
           >
-            { validationsCount.toLocaleString() }
+            <AddressCounterItem prop="validations_count" query={ countersQuery }/>
           </DetailsInfoItem>
         ) }
         { addressQuery.data.block_number_balance_updated_at && (

ui/address/details/AddressCounterItem.tsx

+import { Skeleton } from '@chakra-ui/react';
+import type { UseQueryResult } from '@tanstack/react-query';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import type { AddressCounters } from 'types/api/address';
+
+interface Props {
+  prop: keyof AddressCounters;
+  query: UseQueryResult<AddressCounters>;
+}
+
+const AddressCounterItem = ({ prop, query }: Props) => {
+  if (query.isLoading) {
+    return <Skeleton h={ 5 } w="80px" borderRadius="full"/>;
+  }
+
+  const data = query.data?.[prop];
+
+  if (query.isError || data === null || data === undefined) {
+    return <span>no data</span>;
+  }
+
+  switch (prop) {
+    case 'gas_usage_count':
+      return <span>{ BigNumber(data).toFormat() }</span>;
+    case 'transactions_count':
+    case 'token_transfers_count':
+    case 'validations_count':
+      return <span>{ Number(data).toLocaleString() }</span>;
+  }
+};
+
+export default React.memo(AddressCounterItem);