skeleton for block details

pages/block/[height].tsx

 import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
 import Head from 'next/head';
 import type { RoutedQuery } from 'nextjs-routes';
 import React from 'react';
 
 import getSeo from 'lib/next/block/getSeo';
-import Block from 'ui/pages/Block';
 import Page from 'ui/shared/Page/Page';
 
+const Block = dynamic(() => import('ui/pages/Block'), { ssr: false });
+
 const BlockPage: NextPage<RoutedQuery<'/block/[height]'>> = ({ height }: RoutedQuery<'/block/[height]'>) => {
   const { title, description } = getSeo({ height });
   return (

ui/block/details/BlockDetailsSkeleton.tsx

-import { Grid, GridItem, Skeleton } from '@chakra-ui/react';
-import React from 'react';
-
-import DetailsSkeletonRow from 'ui/shared/skeletons/DetailsSkeletonRow';
-
-const BlockDetailsSkeleton = () => {
-
-  const sectionGap = (
-    <GridItem
-      colSpan={{ base: undefined, lg: 2 }}
-      mt={{ base: 2, lg: 3 }}
-      mb={{ base: 0, lg: 3 }}
-      borderBottom="1px solid"
-      borderColor="divider"
-    />
-  );
-
-  return (
-    <Grid columnGap={ 8 } rowGap={{ base: 5, lg: 7 }} templateColumns={{ base: '1fr', lg: '210px 1fr' }} maxW="1000px">
-      <DetailsSkeletonRow w="25%"/>
-      <DetailsSkeletonRow w="25%"/>
-      <DetailsSkeletonRow w="65%"/>
-      <DetailsSkeletonRow w="25%"/>
-      <DetailsSkeletonRow/>
-      <DetailsSkeletonRow/>
-      { sectionGap }
-      <DetailsSkeletonRow w="50%"/>
-      <DetailsSkeletonRow w="25%"/>
-      <DetailsSkeletonRow w="50%"/>
-      <DetailsSkeletonRow w="50%"/>
-      <DetailsSkeletonRow w="50%"/>
-      { sectionGap }
-      <GridItem colSpan={{ base: undefined, lg: 2 }}>
-        <Skeleton h={ 5 } borderRadius="full" w="100px"/>
-      </GridItem>
-    </Grid>
-  );
-};
-
-export default BlockDetailsSkeleton;

ui/pages/Block.tsx

@@ -10,6 +10,7 @@ import { useAppContext } from 'lib/appContext';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import getQueryParamString from 'lib/router/getQueryParamString';
+import { BLOCK } from 'stubs/block';
 import BlockDetails from 'ui/block/BlockDetails';
 import BlockWithdrawals from 'ui/block/BlockWithdrawals';
 import TextAd from 'ui/shared/ad/TextAd';
@@ -35,14 +36,17 @@ const BlockPageContent = () => {
 
   const blockQuery = useApiQuery('block', {
     pathParams: { height },
-    queryOptions: { enabled: Boolean(height) },
+    queryOptions: {
+      enabled: Boolean(height),
+      placeholderData: BLOCK,
+    },
   });
 
   const blockTxsQuery = useQueryWithPages({
     resourceName: 'block_txs',
     pathParams: { height },
     options: {
-      enabled: Boolean(blockQuery.data?.height && tab === 'txs'),
+      enabled: Boolean(!blockQuery.isPlaceholderData && blockQuery.data?.height && tab === 'txs'),
     },
   });
 
@@ -50,7 +54,7 @@ const BlockPageContent = () => {
     resourceName: 'block_withdrawals',
     pathParams: { height },
     options: {
-      enabled: Boolean(blockQuery.data?.height && appConfig.beaconChain.hasBeaconChain && tab === 'withdrawals'),
+      enabled: Boolean(!blockQuery.isPlaceholderData && blockQuery.data?.height && appConfig.beaconChain.hasBeaconChain && tab === 'withdrawals'),
     },
   });
 

ui/shared/PrevNext.tsx

-import { Box, Icon, IconButton, chakra, Tooltip } from '@chakra-ui/react';
+import { Box, Icon, IconButton, chakra, Tooltip, Flex, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
 import eastArrow from 'icons/arrows/east-mini.svg';
@@ -10,9 +10,10 @@ interface Props {
   nextLabel?: string;
   isPrevDisabled?: boolean;
   isNextDisabled?: boolean;
+  isLoading?: boolean;
 }
 
-const PrevNext = ({ className, onClick, prevLabel, nextLabel, isPrevDisabled, isNextDisabled }: Props) => {
+const PrevNext = ({ className, onClick, prevLabel, nextLabel, isPrevDisabled, isNextDisabled, isLoading }: Props) => {
   const handelPrevClick = React.useCallback(() => {
     onClick('prev');
   }, [ onClick ]);
@@ -21,6 +22,15 @@ const PrevNext = ({ className, onClick, prevLabel, nextLabel, isPrevDisabled, is
     onClick('next');
   }, [ onClick ]);
 
+  if (isLoading) {
+    return (
+      <Flex columnGap="10px" className={ className }>
+        <Skeleton boxSize={ 6 } borderRadius="sm"/>
+        <Skeleton boxSize={ 6 } borderRadius="sm"/>
+      </Flex>
+    );
+  }
+
   return (
     <Box className={ className }>
       <Tooltip label={ prevLabel }>