Merge pull request #559 from blockscout/reduce-flash-2

show-hide ssr

ui/address/AddressBlocksValidated.tsx

@@ -75,10 +75,10 @@ const AddressBlocksValidated = ({ scrollRef }: Props) => {
     if (query.isLoading) {
       return (
         <>
-          <Hide below="lg">
+          <Hide below="lg" ssr={ false }>
             <SkeletonTable columns={ [ '17%', '17%', '16%', '25%', '25%' ] }/>
           </Hide>
-          <Show below="lg">
+          <Show below="lg" ssr={ false }>
             <SkeletonList/>
           </Show>
         </>
@@ -95,7 +95,7 @@ const AddressBlocksValidated = ({ scrollRef }: Props) => {
 
     return (
       <>
-        <Hide below="lg">
+        <Hide below="lg" ssr={ false }>
           <Table variant="simple" size="sm">
             <Thead top={ 80 }>
               <Tr>
@@ -113,7 +113,7 @@ const AddressBlocksValidated = ({ scrollRef }: Props) => {
             </Tbody>
           </Table>
         </Hide>
-        <Show below="lg">
+        <Show below="lg" ssr={ false }>
           { query.data.items.map((item) => (
             <AddressBlocksValidatedListItem key={ item.height } { ...item } page={ query.pagination.page }/>
           )) }

ui/address/AddressInternalTxs.tsx

@@ -48,8 +48,8 @@ const AddressInternalTxs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivE
   if (isLoading) {
     return (
       <>
-        <Show below="lg"><AddressIntTxsSkeletonMobile/></Show>
-        <Hide below="lg"><AddressIntTxsSkeletonDesktop/></Hide>
+        <Show below="lg" ssr={ false }><AddressIntTxsSkeletonMobile/></Show>
+        <Hide below="lg" ssr={ false }><AddressIntTxsSkeletonDesktop/></Hide>
       </>
     );
   }

ui/address/AddressTokenTransfers.tsx

@@ -166,10 +166,10 @@ const AddressTokenTransfers = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLD
     if (isLoading) {
       return (
         <>
-          <Hide below="lg">
+          <Hide below="lg" ssr={ false }>
             <SkeletonTable columns={ [ '44px', '185px', '160px', '25%', '25%', '25%', '25%' ] }/>
           </Hide>
-          <Show below="lg">
+          <Show below="lg" ssr={ false }>
             <SkeletonList/>
           </Show>
         </>
@@ -191,7 +191,7 @@ const AddressTokenTransfers = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLD
     const items = data.items.reduce(flattenTotal, []);
     return (
       <>
-        <Hide below="lg">
+        <Hide below="lg" ssr={ false }>
           <TokenTransferTable
             data={ items }
             baseAddress={ currentAddress }
@@ -203,7 +203,7 @@ const AddressTokenTransfers = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLD
             socketInfoNum={ newItemsCount }
           />
         </Hide>
-        <Show below="lg">
+        <Show below="lg" ssr={ false }>
           { pagination.page === 1 && !tokenFilter && (
             <SocketNewItemsNotice
               url={ window.location.href }

ui/address/coinBalance/AddressCoinBalanceHistory.tsx

@@ -29,10 +29,10 @@ const AddressCoinBalanceHistory = ({ query }: Props) => {
     if (query.isLoading) {
       return (
         <>
-          <Hide below="lg">
+          <Hide below="lg" ssr={ false }>
             <SkeletonTable columns={ [ '25%', '25%', '25%', '25%', '120px' ] }/>
           </Hide>
-          <Show below="lg">
+          <Show below="lg" ssr={ false }>
             <SkeletonList/>
           </Show>
         </>
@@ -45,7 +45,7 @@ const AddressCoinBalanceHistory = ({ query }: Props) => {
 
     return (
       <>
-        <Hide below="lg">
+        <Hide below="lg" ssr={ false }>
           <Table variant="simple" size="sm">
             <Thead top={ 80 }>
               <Tr>
@@ -63,7 +63,7 @@ const AddressCoinBalanceHistory = ({ query }: Props) => {
             </Tbody>
           </Table>
         </Hide>
-        <Show below="lg">
+        <Show below="lg" ssr={ false }>
           { query.data.items.map((item) => (
             <AddressCoinBalanceListItem key={ item.block_number } { ...item } page={ query.pagination.page }/>
           )) }

ui/pages/Accounts.tsx

@@ -34,12 +34,8 @@ const Accounts = () => {
       return (
         <>
           { bar }
-          <Show below="lg">
-            <SkeletonList/>
-          </Show>
-          <Hide below="lg">
-            <SkeletonTable columns={ [ '64px', '30%', '20%', '20%', '15%', '15%' ] }/>
-          </Hide>
+          <SkeletonList display={{ base: 'block', lg: 'none' }}/>
+          <SkeletonTable display={{ base: 'none', lg: 'block' }} columns={ [ '64px', '30%', '20%', '20%', '15%', '15%' ] }/>
         </>
       );
     }

ui/pages/SearchResults.tsx

@@ -32,10 +32,10 @@ const SearchResultsPageContent = () => {
     if (isLoading) {
       return (
         <Box>
-          <Show below="lg">
+          <Show below="lg" ssr={ false }>
             <SkeletonList/>
           </Show>
-          <Hide below="lg">
+          <Hide below="lg" ssr={ false }>
             <SkeletonTable columns={ [ '50%', '50%', '150px' ] }/>
           </Hide>
         </Box>

ui/shared/skeletons/SkeletonList.tsx

-import { Box, Flex, Skeleton, SkeletonCircle } from '@chakra-ui/react';
+import { Box, Flex, Skeleton, SkeletonCircle, chakra } from '@chakra-ui/react';
 import React from 'react';
 
-const SkeletonList = () => {
+const SkeletonList = ({ className }: {className?: string}) => {
   return (
-    <Box>
+    <Box className={ className }>
       { Array.from(Array(2)).map((item, index) => (
         <Flex
           key={ index }
@@ -35,4 +35,4 @@ const SkeletonList = () => {
   );
 };
 
-export default SkeletonList;
+export default chakra(SkeletonList);

ui/shared/skeletons/SkeletonTable.tsx

-import { HStack, Skeleton } from '@chakra-ui/react';
+import { Box, HStack, Skeleton, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 interface Props {
   columns: Array<string>;
+  className?: string;
 }
 
-const SkeletonTable = ({ columns }: Props) => {
+const SkeletonTable = ({ columns, className }: Props) => {
   return (
-    <div>
+    <Box className={ className }>
       <Skeleton height={ 10 } width="100%" borderBottomLeftRadius="none" borderBottomRightRadius="none"/>
       { Array.from(Array(3)).map((item, index) => (
         <HStack key={ index } spacing={ 6 } marginTop={ 8 }>
@@ -22,8 +23,8 @@ const SkeletonTable = ({ columns }: Props) => {
           )) }
         </HStack>
       )) }
-    </div>
+    </Box>
   );
 };
 
-export default React.memo(SkeletonTable);
+export default React.memo(chakra(SkeletonTable));

ui/token/TokenTransfer/TokenTransfer.tsx

@@ -66,11 +66,11 @@ const TokenTransfer = ({ transfersQuery, token }: Props) => {
     if (isLoading) {
       return (
         <>
-          <Hide below="lg">
+          <Hide below="lg" ssr={ false }>
             <SkeletonTable columns={ [ '45%', '15%', '36px', '15%', '25%' ] }
             />
           </Hide>
-          <Show below="lg">
+          <Show below="lg" ssr={ false }>
             <SkeletonList/>
           </Show>
         </>
@@ -88,7 +88,7 @@ const TokenTransfer = ({ transfersQuery, token }: Props) => {
     const items = data.items.reduce(flattenTotal, []);
     return (
       <>
-        <Hide below="lg">
+        <Hide below="lg" ssr={ false }>
           <TokenTransferTable
             data={ items }
             top={ 80 }
@@ -100,7 +100,7 @@ const TokenTransfer = ({ transfersQuery, token }: Props) => {
             socketInfoNum={ newItemsCount }
           />
         </Hide>
-        <Show below="lg">
+        <Show below="lg" ssr={ false }>
           { pagination.page === 1 && (
             <SocketNewItemsNotice
               url={ window.location.href }

ui/tokens/Tokens.tsx

@@ -69,19 +69,15 @@ const Tokens = () => {
 
   const bar = (
     <>
-      <Show below="lg">
-        <HStack spacing={ 3 } mb={ 6 }>
+      <HStack spacing={ 3 } mb={ 6 } display={{ base: 'flex', lg: 'none' }}>
         { typeFilter }
         { filterInput }
       </HStack>
-      </Show>
       <ActionBar mt={ -6 }>
-        <Hide below="lg">
-          <HStack spacing={ 3 }>
+        <HStack spacing={ 3 } display={{ base: 'none', lg: 'flex' }}>
           { typeFilter }
           { filterInput }
         </HStack>
-        </Hide>
         { isPaginationVisible && <Pagination ml="auto" { ...pagination }/> }
       </ActionBar>
     </>
@@ -91,10 +87,8 @@ const Tokens = () => {
     return (
       <>
         { bar }
-        <Show below="lg"><SkeletonList/></Show>
-        <Hide below="lg">
-          <SkeletonTable columns={ [ '25px', '33%', '33%', '33%', '110px' ] }/>
-        </Hide>
+        <SkeletonList display={{ base: 'block', lg: 'none' }}/>
+        <SkeletonTable display={{ base: 'none', lg: 'block' }} columns={ [ '25px', '33%', '33%', '33%', '110px' ] }/>
       </>
     );
   }

ui/tx/TxInternals.tsx

@@ -101,8 +101,8 @@ const TxInternals = () => {
   if (isLoading || txInfo.isLoading) {
     return (
       <>
-        <Show below="lg"><SkeletonList/></Show>
-        <Hide below="lg"><SkeletonTable columns={ [ '28%', '20%', '24px', '20%', '16%', '16%' ] }/></Hide>
+        <Show below="lg" ssr={ false }><SkeletonList/></Show>
+        <Hide below="lg" ssr={ false }><SkeletonTable columns={ [ '28%', '20%', '24px', '20%', '16%', '16%' ] }/></Hide>
       </>
     );
   }

ui/tx/TxTokenTransfer.tsx

@@ -83,10 +83,10 @@ const TxTokenTransfer = () => {
     const items = tokenTransferQuery.data.items.reduce(flattenTotal, []);
     return (
       <>
-        <Hide below="lg">
+        <Hide below="lg" ssr={ false }>
           <TokenTransferTable data={ items } top={ 80 }/>
         </Hide>
-        <Show below="lg">
+        <Show below="lg" ssr={ false }>
           <TokenTransferList data={ items }/>
         </Show>
       </>

ui/tx/details/TxDetailsTokenTransfers.tsx

@@ -61,7 +61,7 @@ const TxDetailsTokenTransfers = ({ data, txHash }: Props) => {
       }) }
       { showViewAllLink && (
         <>
-          <Show above="lg"><GridItem></GridItem></Show>
+          <Show above="lg" ssr={ false }><GridItem></GridItem></Show>
           <GridItem fontSize="sm" alignItems="center" display="inline-flex" pl={{ base: '28px', lg: 0 }}>
             <Icon as={ tokenIcon } boxSize={ 6 }/>
             <NextLink href={ viewAllUrl } passHref>