skeleton for pagination component

lib/hooks/useQueryWithPages.ts

@@ -158,6 +158,7 @@ export default function useQueryWithPages<Resource extends PaginatedResources>({
     resetPage,
     hasNextPage: nextPageParams ? Object.keys(nextPageParams).length > 0 : false,
     canGoBackwards: canGoBackwards.current,
+    isLoading: queryResult.isPlaceholderData && !hasPagination,
   };
 
   const isPaginationVisible = hasPagination || (!queryResult.isLoading && !queryResult.isError && pagination.hasNextPage);

mocks/blocks/block.ts

@@ -47,6 +47,7 @@ export const base: Block = {
   tx_fees: '26853607500000000',
   type: 'block',
   uncles_hashes: [],
+  has_beacon_chain_withdrawals: false,
 };
 
 export const genesis: Block = {
@@ -83,6 +84,7 @@ export const genesis: Block = {
   tx_fees: '0',
   type: 'block',
   uncles_hashes: [],
+  has_beacon_chain_withdrawals: false,
 };
 
 export const base2: Block = {

stubs/stats.ts

+import type { HomeStats } from 'types/api/stats';
+
+export const HOMEPAGE_STATS: HomeStats = {
+  average_block_time: 14346,
+  coin_price: '1807.68',
+  gas_prices: {
+    average: 0.1,
+    fast: 0.11,
+    slow: 0.1,
+  },
+  gas_used_today: '0',
+  market_cap: '0',
+  network_utilization_percentage: 22.56,
+  static_gas_price: null,
+  total_addresses: '28634064',
+  total_blocks: '8940150',
+  total_gas_used: '0',
+  total_transactions: '193823272',
+  transactions_today: '0',
+};

types/api/stats.ts

@@ -8,7 +8,7 @@ export type HomeStats = {
   transactions_today: string;
   gas_used_today: string;
   gas_prices: GasPrices | null;
-  static_gas_price: string;
+  static_gas_price: string | null;
   market_cap: string;
   network_utilization_percentage: number;
 }

ui/blocks/BlocksContent.tsx

-import { Show, Hide, Alert } from '@chakra-ui/react';
+import { Alert, Box } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
 import { useQueryClient } from '@tanstack/react-query';
 import React from 'react';
@@ -77,12 +77,12 @@ const BlocksContent = ({ type, query }: Props) => {
   const content = query.data?.items ? (
     <>
       { socketAlert && <Alert status="warning" mb={ 6 } as="a" href={ window.document.location.href }>{ socketAlert }</Alert> }
-      <Show below="lg" key="content-mobile" ssr={ false }>
+      <Box display={{ base: 'block', lg: 'none' }}>
         <BlocksList data={ query.data.items } isLoading={ query.isPlaceholderData } page={ query.pagination.page }/>
-      </Show>
-      <Hide below="lg" key="content-desktop" ssr={ false }>
+      </Box>
+      <Box display={{ base: 'none', lg: 'block' }}>
         <BlocksTable data={ query.data.items } top={ query.isPaginationVisible ? 80 : 0 } page={ query.pagination.page } isLoading={ query.isPlaceholderData }/>
-      </Hide>
+      </Box>
     </>
   ) : null;
 

ui/blocks/BlocksTabSlot.tsx

@@ -2,8 +2,8 @@ import { Flex, Box, Text, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
 import useApiQuery from 'lib/api/useApiQuery';
-import useIsMobile from 'lib/hooks/useIsMobile';
 import { nbsp } from 'lib/html-entities';
+import { HOMEPAGE_STATS } from 'stubs/stats';
 import type { Props as PaginationProps } from 'ui/shared/Pagination';
 import Pagination from 'ui/shared/Pagination';
 
@@ -13,24 +13,22 @@ interface Props {
 }
 
 const BlocksTabSlot = ({ pagination, isPaginationVisible }: Props) => {
-  const isMobile = useIsMobile();
-  const statsQuery = useApiQuery('homepage_stats');
-
-  if (isMobile) {
-    return null;
-  }
+  const statsQuery = useApiQuery('homepage_stats', {
+    queryOptions: {
+      placeholderData: HOMEPAGE_STATS,
+    },
+  });
 
   return (
-    <Flex alignItems="center" columnGap={ 8 }>
-      { statsQuery.isLoading && <Skeleton w="175px" h="24px"/> }
+    <Flex alignItems="center" columnGap={ 8 } display={{ base: 'none', lg: 'flex' }}>
       { statsQuery.data?.network_utilization_percentage !== undefined && (
         <Box>
           <Text as="span" fontSize="sm">
               Network utilization (last 50 blocks):{ nbsp }
           </Text>
-          <Text as="span" fontSize="sm" color="blue.400" fontWeight={ 600 }>
-            { statsQuery.data.network_utilization_percentage.toFixed(2) }%
-          </Text>
+          <Skeleton display="inline-block" fontSize="sm" color="blue.400" fontWeight={ 600 } isLoaded={ !statsQuery.isPlaceholderData }>
+            <span>{ statsQuery.data.network_utilization_percentage.toFixed(2) }%</span>
+          </Skeleton>
         </Box>
       ) }
       { isPaginationVisible && <Pagination my={ 1 } { ...pagination }/> }

ui/blocks/BlocksTable.tsx

@@ -36,7 +36,7 @@ const BlocksTable = ({ data, isLoading, top, page }: Props) => {
         <AnimatePresence initial={ false }>
           { data.map((item, index) => (
             <BlocksTableItem
-              key={ item.height + (isLoading ? String(index) : '') }
+              key={ item.height + (isLoading ? `${ index }_${ page }` : '') }
               data={ item }
               enableTimeIncrement={ page === 1 && !isLoading }
               isLoading={ isLoading }

ui/shared/Pagination.tsx

-import { Button, Flex, Icon, IconButton, chakra } from '@chakra-ui/react';
+import { Button, Skeleton, Flex, Icon, IconButton, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import arrowIcon from 'icons/arrows/east-mini.svg';
@@ -11,9 +11,10 @@ export type Props = {
   hasNextPage: boolean;
   className?: string;
   canGoBackwards: boolean;
+  isLoading?: boolean;
 }
 
-const Pagination = ({ page, onNextPageClick, onPrevPageClick, resetPage, hasNextPage, className, canGoBackwards }: Props) => {
+const Pagination = ({ page, onNextPageClick, onPrevPageClick, resetPage, hasNextPage, className, canGoBackwards, isLoading }: Props) => {
 
   return (
     <Flex
@@ -21,46 +22,51 @@ const Pagination = ({ page, onNextPageClick, onPrevPageClick, resetPage, hasNext
       fontSize="sm"
       alignItems="center"
     >
-      <Button
-        variant="outline"
-        size="sm"
-        onClick={ resetPage }
-        isDisabled={ page === 1 }
-        mr={ 4 }
-      >
+      <Skeleton isLoaded={ !isLoading } display="inline-block" mr={ 4 } borderRadius="base">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={ resetPage }
+          isDisabled={ page === 1 }
+        >
         First
-      </Button>
-      <IconButton
-        variant="outline"
-        onClick={ onPrevPageClick }
-        size="sm"
-        aria-label="Next page"
-        w="36px"
-        icon={ <Icon as={ arrowIcon } w={ 5 } h={ 5 }/> }
-        mr={ 3 }
-        isDisabled={ !canGoBackwards || page === 1 }
-      />
-      <Button
-        variant="outline"
-        size="sm"
-        isActive
-        borderWidth="1px"
-        fontWeight={ 400 }
-        h={ 8 }
-        cursor="unset"
-      >
-        { page }
-      </Button>
-      <IconButton
-        variant="outline"
-        onClick={ onNextPageClick }
-        size="sm"
-        aria-label="Next page"
-        w="36px"
-        icon={ <Icon as={ arrowIcon } w={ 5 } h={ 5 } transform="rotate(180deg)"/> }
-        ml={ 3 }
-        isDisabled={ !hasNextPage }
-      />
+        </Button>
+      </Skeleton>
+      <Skeleton isLoaded={ !isLoading } display="inline-block" mr={ 3 } borderRadius="base">
+        <IconButton
+          variant="outline"
+          onClick={ onPrevPageClick }
+          size="sm"
+          aria-label="Next page"
+          w="36px"
+          icon={ <Icon as={ arrowIcon } w={ 5 } h={ 5 }/> }
+          isDisabled={ !canGoBackwards || page === 1 }
+        />
+      </Skeleton>
+      <Skeleton isLoaded={ !isLoading } display="inline-block" borderRadius="base">
+        <Button
+          variant="outline"
+          size="sm"
+          isActive
+          borderWidth="1px"
+          fontWeight={ 400 }
+          h={ 8 }
+          cursor="unset"
+        >
+          { page }
+        </Button>
+      </Skeleton>
+      <Skeleton isLoaded={ !isLoading } display="inline-block" ml={ 3 } borderRadius="base">
+        <IconButton
+          variant="outline"
+          onClick={ onNextPageClick }
+          size="sm"
+          aria-label="Next page"
+          w="36px"
+          icon={ <Icon as={ arrowIcon } w={ 5 } h={ 5 } transform="rotate(180deg)"/> }
+          isDisabled={ !hasNextPage }
+        />
+      </Skeleton>
       { /* not implemented yet */ }
       { /* <Flex alignItems="center" width="132px" ml={ 16 } display={{ base: 'none', lg: 'flex' }}>
             Go to <Input w="84px" size="xs" ml={ 2 }/>