common skeleton for mobile lists

ui/address/AddressBlocksValidated.tsx

@@ -14,12 +14,12 @@ import useSocketMessage from 'lib/socket/useSocketMessage';
 import ActionBar from 'ui/shared/ActionBar';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import Pagination from 'ui/shared/Pagination';
+import SkeletonList from 'ui/shared/skeletons/SkeletonList';
 import SkeletonTable from 'ui/shared/SkeletonTable';
 import SocketAlert from 'ui/shared/SocketAlert';
 import { default as Thead } from 'ui/shared/TheadSticky';
 
 import AddressBlocksValidatedListItem from './blocksValidated/AddressBlocksValidatedListItem';
-import AddressBlocksValidatedSkeletonMobile from './blocksValidated/AddressBlocksValidatedSkeletonMobile';
 import AddressBlocksValidatedTableItem from './blocksValidated/AddressBlocksValidatedTableItem';
 
 interface Props {
@@ -79,7 +79,7 @@ const AddressBlocksValidated = ({ addressQuery }: Props) => {
             <SkeletonTable columns={ [ '17%', '17%', '16%', '25%', '25%' ] }/>
           </Hide>
           <Show below="lg">
-            <AddressBlocksValidatedSkeletonMobile/>
+            <SkeletonList/>
           </Show>
         </>
       );

ui/address/blocksValidated/AddressBlocksValidatedSkeletonMobile.tsx

-import { Skeleton, Flex, Box, useColorModeValue } from '@chakra-ui/react';
-import React from 'react';
-
-const AddressBlocksValidatedSkeletonMobile = () => {
-  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
-
-  return (
-    <Box>
-      { Array.from(Array(2)).map((item, index) => (
-        <Flex
-          key={ index }
-          rowGap={ 3 }
-          flexDirection="column"
-          paddingY={ 6 }
-          borderTopWidth="1px"
-          borderColor={ borderColor }
-          _last={{
-            borderBottomWidth: '1px',
-          }}
-        >
-          <Flex justifyContent="space-between" w="100%" h={ 6 }>
-            <Skeleton w="100px"/>
-            <Skeleton w="100px"/>
-          </Flex>
-          <Flex h={ 6 } columnGap={ 2 }>
-            <Skeleton w="40px"/>
-            <Skeleton w="40px"/>
-          </Flex>
-          <Flex h={ 6 } columnGap={ 2 }>
-            <Skeleton w="70px"/>
-            <Skeleton w="70px"/>
-          </Flex>
-          <Flex h={ 6 } columnGap={ 2 }>
-            <Skeleton w="100px"/>
-            <Skeleton w="120px"/>
-          </Flex>
-        </Flex>
-      )) }
-    </Box>
-  );
-};
-
-export default AddressBlocksValidatedSkeletonMobile;

ui/address/coinBalance/AddressCoinBalanceHistory.tsx

@@ -9,11 +9,11 @@ import ActionBar from 'ui/shared/ActionBar';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import type { Props as PaginationProps } from 'ui/shared/Pagination';
 import Pagination from 'ui/shared/Pagination';
+import SkeletonList from 'ui/shared/skeletons/SkeletonList';
 import SkeletonTable from 'ui/shared/SkeletonTable';
 import { default as Thead } from 'ui/shared/TheadSticky';
 
 import AddressCoinBalanceListItem from './AddressCoinBalanceListItem';
-import AddressCoinBalanceSkeletonMobile from './AddressCoinBalanceSkeletonMobile';
 import AddressCoinBalanceTableItem from './AddressCoinBalanceTableItem';
 
 interface Props {
@@ -34,7 +34,7 @@ const AddressCoinBalanceHistory = ({ query }: Props) => {
             <SkeletonTable columns={ [ '25%', '25%', '25%', '25%', '120px' ] }/>
           </Hide>
           <Show below="lg">
-            <AddressCoinBalanceSkeletonMobile/>
+            <SkeletonList/>
           </Show>
         </>
       );

ui/address/coinBalance/AddressCoinBalanceSkeletonMobile.tsx

-import { Skeleton, Flex, Box, useColorModeValue } from '@chakra-ui/react';
-import React from 'react';
-
-const AddressCoinBalanceSkeletonMobile = () => {
-  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
-
-  return (
-    <Box>
-      { Array.from(Array(2)).map((item, index) => (
-        <Flex
-          key={ index }
-          rowGap={ 3 }
-          flexDirection="column"
-          paddingY={ 6 }
-          borderTopWidth="1px"
-          borderColor={ borderColor }
-          _last={{
-            borderBottomWidth: '1px',
-          }}
-        >
-          <Flex justifyContent="space-between" w="100%" h={ 6 }>
-            <Skeleton w="170px"/>
-            <Skeleton w="120px"/>
-          </Flex>
-          <Flex h={ 6 } columnGap={ 2 }>
-            <Skeleton w="40px"/>
-            <Skeleton w="80px"/>
-          </Flex>
-          <Flex h={ 6 } columnGap={ 2 }>
-            <Skeleton w="40px"/>
-            <Skeleton w="150px"/>
-          </Flex>
-          <Flex h={ 6 } columnGap={ 2 }>
-            <Skeleton w="30px"/>
-            <Skeleton w="60px"/>
-          </Flex>
-        </Flex>
-      )) }
-    </Box>
-  );
-};
-
-export default AddressCoinBalanceSkeletonMobile;

ui/blocks/BlocksContent.tsx

@@ -11,12 +11,12 @@ import useIsMobile from 'lib/hooks/useIsMobile';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
 import BlocksList from 'ui/blocks/BlocksList';
-import BlocksSkeletonMobile from 'ui/blocks/BlocksSkeletonMobile';
 import BlocksTable from 'ui/blocks/BlocksTable';
 import ActionBar from 'ui/shared/ActionBar';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import Pagination from 'ui/shared/Pagination';
 import type { Props as PaginationProps } from 'ui/shared/Pagination';
+import SkeletonList from 'ui/shared/skeletons/SkeletonList';
 import SkeletonTable from 'ui/shared/SkeletonTable';
 
 type QueryResult = UseQueryResult<BlocksResponse> & {
@@ -83,7 +83,7 @@ const BlocksContent = ({ type, query }: Props) => {
       return (
         <>
           <Show below="lg" key="skeleton-mobile" ssr={ false }>
-            <BlocksSkeletonMobile/>
+            <SkeletonList/>
           </Show>
           <Hide below="lg" key="skeleton-desktop" ssr={ false }>
             <SkeletonTable columns={ [ '125px', '120px', '21%', '64px', '35%', '22%', '22%' ] }/>

ui/blocks/BlocksSkeletonMobile.tsx

-import { Skeleton, Flex, Box, useColorModeValue } from '@chakra-ui/react';
-import React from 'react';
-
-const BlocksSkeletonMobile = () => {
-  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
-
-  return (
-    <Box>
-      { Array.from(Array(2)).map((item, index) => (
-        <Flex
-          key={ index }
-          rowGap={ 3 }
-          flexDirection="column"
-          paddingY={ 6 }
-          borderTopWidth="1px"
-          borderColor={ borderColor }
-          _last={{
-            borderBottomWidth: '1px',
-          }}
-        >
-          <Flex h={ 6 } justifyContent="space-between">
-            <Skeleton w="75px"/>
-            <Skeleton w="90px"/>
-          </Flex>
-          <Skeleton h={ 6 } w="130px"/>
-          <Skeleton h={ 6 } w="180px"/>
-          <Skeleton h={ 6 } w="60px"/>
-          <Skeleton h={ 6 } w="100%"/>
-          <Skeleton h={ 6 } w="170px"/>
-          <Skeleton h={ 6 } w="100%"/>
-        </Flex>
-      )) }
-    </Box>
-  );
-};
-
-export default BlocksSkeletonMobile;

ui/shared/TokenTransfer/TokenTransfer.tsx

@@ -17,11 +17,11 @@ import EmptySearchResult from 'ui/apps/EmptySearchResult';
 import ActionBar from 'ui/shared/ActionBar';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import Pagination from 'ui/shared/Pagination';
+import SkeletonList from 'ui/shared/skeletons/SkeletonList';
 import SkeletonTable from 'ui/shared/SkeletonTable';
 import { flattenTotal } from 'ui/shared/TokenTransfer/helpers';
 import TokenTransferFilter from 'ui/shared/TokenTransfer/TokenTransferFilter';
 import TokenTransferList from 'ui/shared/TokenTransfer/TokenTransferList';
-import TokenTransferSkeletonMobile from 'ui/shared/TokenTransfer/TokenTransferSkeletonMobile';
 import TokenTransferTable from 'ui/shared/TokenTransfer/TokenTransferTable';
 
 import { TOKEN_TYPE } from './helpers';
@@ -85,7 +85,7 @@ const TokenTransfer = ({ isLoading: isLoadingProp, isDisabled, queryName, queryI
             />
           </Hide>
           <Show below="lg">
-            <TokenTransferSkeletonMobile showTxInfo={ showTxInfo }/>
+            <SkeletonList/>
           </Show>
         </>
       );

ui/shared/TokenTransfer/TokenTransferSkeletonMobile.tsx

-import { Skeleton, SkeletonCircle, Flex, Box, useColorModeValue } from '@chakra-ui/react';
-import React from 'react';
-
-const TokenTransferSkeletonMobile = ({ showTxInfo }: { showTxInfo?: boolean }) => {
-  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
-
-  return (
-    <Box>
-      { Array.from(Array(2)).map((item, index) => (
-        <Flex
-          key={ index }
-          rowGap={ 3 }
-          flexDirection="column"
-          paddingY={ 6 }
-          borderTopWidth="1px"
-          borderColor={ borderColor }
-          _last={{
-            borderBottomWidth: '1px',
-          }}
-        >
-          <Flex h={ 6 }>
-            <SkeletonCircle size="6" mr={ 2 } flexShrink={ 0 }/>
-            <Skeleton w="100px" mr={ 2 }/>
-            <Skeleton w="50px"/>
-            { showTxInfo && <Skeleton w="24px" ml="auto"/> }
-          </Flex>
-          <Flex h={ 6 } columnGap={ 2 }>
-            <Skeleton w="70px"/>
-            <Skeleton w="24px"/>
-            <Skeleton w="90px"/>
-          </Flex>
-          { showTxInfo && (
-            <Flex h={ 6 } columnGap={ 2 }>
-              <Skeleton w="70px" flexShrink={ 0 }/>
-              <Skeleton w="100%"/>
-            </Flex>
-          ) }
-          <Flex h={ 6 }>
-            <SkeletonCircle size="6" mr={ 2 } flexShrink={ 0 }/>
-            <Skeleton flexGrow={ 1 } mr={ 3 }/>
-            <Skeleton w="50px" mr={ 3 }/>
-            <SkeletonCircle size="6" mr={ 2 } flexShrink={ 0 }/>
-            <Skeleton flexGrow={ 1 } mr={ 3 }/>
-          </Flex>
-          <Flex h={ 6 } columnGap={ 2 }>
-            <Skeleton w="45px"/>
-            <Skeleton w="90px"/>
-          </Flex>
-        </Flex>
-      )) }
-    </Box>
-  );
-};
-
-export default TokenTransferSkeletonMobile;

ui/tx/internals/TxInternalsSkeletonMobile.tsx → ui/shared/skeletons/SkeletonList.tsx

-import { Skeleton, SkeletonCircle, Flex, Box, useColorModeValue } from '@chakra-ui/react';
+import { Box, Flex, Skeleton, SkeletonCircle, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
-const TxInternalsSkeletonMobile = () => {
+const SkeletonList = () => {
   const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
 
   return (
@@ -9,38 +9,32 @@ const TxInternalsSkeletonMobile = () => {
       { Array.from(Array(2)).map((item, index) => (
         <Flex
           key={ index }
-          rowGap={ 3 }
+          rowGap={ 4 }
           flexDirection="column"
           paddingY={ 6 }
           borderTopWidth="1px"
           borderColor={ borderColor }
           _last={{
-            borderBottomWidth: '1px',
+            borderBottomWidth: '0px',
           }}
         >
-          <Flex h={ 6 }>
-            <Skeleton w="100px" mr={ 2 }/>
-            <Skeleton w="90px"/>
+          <Flex h={ 4 }>
+            <Skeleton w="30%" mr={ 2 } borderRadius="full"/>
+            <Skeleton w="15%" borderRadius="full"/>
           </Flex>
-          <Flex h={ 6 }>
-            <SkeletonCircle size="6" mr={ 2 } flexShrink={ 0 }/>
-            <Skeleton flexGrow={ 1 } mr={ 3 }/>
-            <Skeleton w={ 6 } mr={ 3 }/>
-            <SkeletonCircle size="6" mr={ 2 } flexShrink={ 0 }/>
-            <Skeleton flexGrow={ 1 } mr={ 3 }/>
-          </Flex>
-          <Flex h={ 6 }>
-            <Skeleton w="70px" mr={ 2 }/>
-            <Skeleton w="30px"/>
-          </Flex>
-          <Flex h={ 6 }>
-            <Skeleton w="70px" mr={ 2 }/>
-            <Skeleton w="60px"/>
+          <Flex h={ 4 }>
+            <SkeletonCircle boxSize={ 4 } mr={ 2 } flexShrink={ 0 }/>
+            <Skeleton flexGrow={ 1 } mr={ 3 } borderRadius="full"/>
+            <Skeleton w={ 6 } mr={ 3 } borderRadius="full"/>
+            <SkeletonCircle boxSize={ 4 } mr={ 2 } flexShrink={ 0 }/>
+            <Skeleton flexGrow={ 1 } mr={ 3 } borderRadius="full"/>
           </Flex>
+          <Skeleton w="75%" h={ 4 } borderRadius="full"/>
+          <Skeleton w="60%" h={ 4 } borderRadius="full"/>
         </Flex>
       )) }
     </Box>
   );
 };
 
-export default TxInternalsSkeletonMobile;
+export default SkeletonList;

ui/tx/TxInternals.tsx

@@ -14,9 +14,9 @@ import DataFetchAlert from 'ui/shared/DataFetchAlert';
 // import FilterInput from 'ui/shared/FilterInput';
 // import TxInternalsFilter from 'ui/tx/internals/TxInternalsFilter';
 import Pagination from 'ui/shared/Pagination';
+import SkeletonList from 'ui/shared/skeletons/SkeletonList';
+import SkeletonTable from 'ui/shared/SkeletonTable';
 import TxInternalsList from 'ui/tx/internals/TxInternalsList';
-import TxInternalsSkeletonDesktop from 'ui/tx/internals/TxInternalsSkeletonDesktop';
-import TxInternalsSkeletonMobile from 'ui/tx/internals/TxInternalsSkeletonMobile';
 import TxInternalsTable from 'ui/tx/internals/TxInternalsTable';
 import type { Sort, SortField } from 'ui/tx/internals/utils';
 import TxPendingAlert from 'ui/tx/TxPendingAlert';
@@ -104,8 +104,8 @@ const TxInternals = () => {
   if (isLoading || txInfo.isLoading) {
     return (
       <>
-        <Show below="lg"><TxInternalsSkeletonMobile/></Show>
-        <Hide below="lg"><TxInternalsSkeletonDesktop/></Hide>
+        <Show below="lg"><SkeletonList/></Show>
+        <Hide below="lg"><SkeletonTable columns={ [ '28%', '20%', '24px', '20%', '16%', '16%' ] }/></Hide>
       </>
     );
   }

ui/tx/internals/TxInternalsSkeletonDesktop.tsx

-import React from 'react';
-
-import SkeletonTable from 'ui/shared/SkeletonTable';
-
-const TxInternalsSkeletonDesktop = () => {
-  return (
-    <SkeletonTable columns={ [ '28%', '20%', '24px', '20%', '16%', '16%' ] }/>
-  );
-};
-
-export default TxInternalsSkeletonDesktop;

ui/txs/TxsContent.tsx

@@ -7,12 +7,12 @@ import type { TxsResponse } from 'types/api/transaction';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import type { Props as PaginationProps } from 'ui/shared/Pagination';
+import SkeletonList from 'ui/shared/skeletons/SkeletonList';
+import SkeletonTable from 'ui/shared/SkeletonTable';
 
 import TxsHeaderMobile from './TxsHeaderMobile';
 import TxsListItem from './TxsListItem';
 import TxsNewItemNotice from './TxsNewItemNotice';
-import TxsSkeletonDesktop from './TxsSkeletonDesktop';
-import TxsSkeletonMobile from './TxsSkeletonMobile';
 import TxsTable from './TxsTable';
 import useTxsSort from './useTxsSort';
 
@@ -41,8 +41,13 @@ const TxsContent = ({ filter, query, showBlockInfo = true, showSocketInfo = true
     if (isLoading) {
       return (
         <>
-          <Show below="lg" ssr={ false }><TxsSkeletonMobile showBlockInfo={ showBlockInfo }/></Show>
-          <Hide below="lg" ssr={ false }><TxsSkeletonDesktop showBlockInfo={ showBlockInfo }/></Hide>
+          <Show below="lg" ssr={ false }><SkeletonList/></Show>
+          <Hide below="lg" ssr={ false }>
+            <SkeletonTable columns={ showBlockInfo ?
+              [ '32px', '20%', '18%', '15%', '11%', '292px', '18%', '18%' ] :
+              [ '32px', '20%', '18%', '15%', '292px', '18%', '18%' ]
+            }/>
+          </Hide>
         </>
       );
     }

ui/txs/TxsSkeletonDesktop.tsx

-import { Box } from '@chakra-ui/react';
-import React from 'react';
-
-import SkeletonTable from 'ui/shared/SkeletonTable';
-
-interface Props {
-  showBlockInfo: boolean;
-}
-
-const TxsInternalsSkeletonDesktop = ({ showBlockInfo }: Props) => {
-  return (
-    <Box mb={ 8 }>
-      <SkeletonTable columns={ showBlockInfo ?
-        [ '32px', '20%', '18%', '15%', '11%', '292px', '18%', '18%' ] :
-        [ '32px', '20%', '18%', '15%', '292px', '18%', '18%' ]
-      }/>
-    </Box>
-  );
-};
-
-export default TxsInternalsSkeletonDesktop;

ui/txs/TxsSkeletonMobile.tsx

-import { Skeleton, Flex, Box, useColorModeValue } from '@chakra-ui/react';
-import React from 'react';
-
-interface Props {
-  showBlockInfo: boolean;
-}
-
-const TxInternalsSkeletonMobile = ({ showBlockInfo }: Props) => {
-  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
-
-  return (
-    <Box>
-      { Array.from(Array(2)).map((item, index) => (
-        <Flex
-          key={ index }
-          flexDirection="column"
-          paddingBottom={ 3 }
-          paddingTop={ 4 }
-          borderTopWidth="1px"
-          borderColor={ borderColor }
-          _last={{
-            borderBottomWidth: '1px',
-          }}
-        >
-          <Flex h={ 6 }>
-            <Skeleton w="100px" mr={ 2 } h={ 6 }/>
-            <Skeleton w="100px" h={ 6 }/>
-          </Flex>
-          <Skeleton w="100%" h="30px" mt={ 3 }/>
-          <Skeleton w="50%" h={ 6 } mt={ 3 }/>
-          <Skeleton w="50%" h={ 6 } mt={ 2 }/>
-          { showBlockInfo && <Skeleton w="100%" h={ 6 } mt={ 6 }/> }
-          <Skeleton w="50%" h={ 6 } mt={ 2 }/>
-          <Skeleton w="50%" h={ 6 } mt={ 2 }/>
-        </Flex>
-      )) }
-    </Box>
-  );
-};
-
-export default TxInternalsSkeletonMobile;