final skeleton variant

ui/pages/ApiKeys.tsx

@@ -13,8 +13,8 @@ import ApiKeyTable from 'ui/apiKey/ApiKeyTable/ApiKeyTable';
 import DeleteApiKeyModal from 'ui/apiKey/DeleteApiKeyModal';
 import AccountPageDescription from 'ui/shared/AccountPageDescription';
 import AccountPageHeader from 'ui/shared/AccountPageHeader';
-import ContentLoader from 'ui/shared/ContentLoader';
 import Page from 'ui/shared/Page/Page';
+import SkeletonAccountMobile from 'ui/shared/SkeletonAccountMobile';
 import SkeletonTable from 'ui/shared/SkeletonTable';
 
 import DataFetchAlert from '../shared/DataFetchAlert';
@@ -60,7 +60,7 @@ const ApiKeysPage: React.FC = () => {
 
   const content = (() => {
     if (isLoading && !data) {
-      const loader = isMobile ? <ContentLoader/> : (
+      const loader = isMobile ? <SkeletonAccountMobile/> : (
         <>
           <SkeletonTable columns={ [ '100%', '108px' ] }/>
           <Skeleton height="48px" width="156px" marginTop={ 8 }/>

ui/pages/CustomAbi.tsx

@@ -12,8 +12,8 @@ import CustomAbiTable from 'ui/customAbi/CustomAbiTable/CustomAbiTable';
 import DeleteCustomAbiModal from 'ui/customAbi/DeleteCustomAbiModal';
 import AccountPageDescription from 'ui/shared/AccountPageDescription';
 import AccountPageHeader from 'ui/shared/AccountPageHeader';
-import ContentLoader from 'ui/shared/ContentLoader';
 import Page from 'ui/shared/Page/Page';
+import SkeletonAccountMobile from 'ui/shared/SkeletonAccountMobile';
 import SkeletonTable from 'ui/shared/SkeletonTable';
 
 import DataFetchAlert from '../shared/DataFetchAlert';
@@ -56,7 +56,7 @@ const CustomAbiPage: React.FC = () => {
 
   const content = (() => {
     if (isLoading && !data) {
-      const loader = isMobile ? <ContentLoader/> : (
+      const loader = isMobile ? <SkeletonAccountMobile/> : (
         <>
           <SkeletonTable columns={ [ '100%', '108px' ] }/>
           <Skeleton height="44px" width="156px" marginTop={ 8 }/>

ui/pages/Watchlist.tsx

@@ -8,9 +8,9 @@ import fetch from 'lib/client/fetch';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import AccountPageDescription from 'ui/shared/AccountPageDescription';
 import AccountPageHeader from 'ui/shared/AccountPageHeader';
-import ContentLoader from 'ui/shared/ContentLoader';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import Page from 'ui/shared/Page/Page';
+import SkeletonAccountMobile from 'ui/shared/SkeletonAccountMobile';
 import SkeletonTable from 'ui/shared/SkeletonTable';
 import AddressModal from 'ui/watchlist/AddressModal/AddressModal';
 import DeleteAddressModal from 'ui/watchlist/DeleteAddressModal';
@@ -56,7 +56,7 @@ const WatchList: React.FC = () => {
 
   let content;
   if (isLoading && !data) {
-    const loader = isMobile ? <ContentLoader/> : (
+    const loader = isMobile ? <SkeletonAccountMobile showFooterSlot/> : (
       <>
         <SkeletonTable columns={ [ '70%', '30%', '160px', '108px' ] }/>
         <Skeleton height="44px" width="156px" marginTop={ 8 }/>

ui/privateTags/PrivateAddressTags.tsx

@@ -5,7 +5,6 @@ import React, { useCallback, useState } from 'react';
 import type { AddressTags, AddressTag } from 'types/api/account';
 
 import fetch from 'lib/client/fetch';
-import delay from 'lib/delay';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import AccountPageDescription from 'ui/shared/AccountPageDescription';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
@@ -19,13 +18,7 @@ import DeletePrivateTagModal from './DeletePrivateTagModal';
 
 const PrivateAddressTags = () => {
   const { data: addressTagsData, isLoading, isError } =
-    useQuery<unknown, unknown, AddressTags>([ 'address-tags' ], async() => {
-      const [ result ] = await Promise.all([
-        fetch('/api/account/private-tags/address'),
-        delay(5_000_000),
-      ]);
-      return result;
-    }, { refetchOnMount: false });
+    useQuery<unknown, unknown, AddressTags>([ 'address-tags' ], async() => fetch('/api/account/private-tags/address'), { refetchOnMount: false });
 
   const addressModalProps = useDisclosure();
   const deleteModalProps = useDisclosure();
@@ -62,12 +55,7 @@ const PrivateAddressTags = () => {
   );
 
   if (isLoading && !addressTagsData) {
-    const loader = isMobile ? (
-      <Box>
-        <SkeletonAccountMobile/>
-        <SkeletonAccountMobile/>
-      </Box>
-    ) : (
+    const loader = isMobile ? <SkeletonAccountMobile/> : (
       <>
         <SkeletonTable columns={ [ '60%', '40%', '108px' ] }/>
         <Skeleton height="44px" width="156px" marginTop={ 8 }/>

ui/privateTags/PrivateTransactionTags.tsx

@@ -7,8 +7,8 @@ import type { TransactionTags, TransactionTag } from 'types/api/account';
 import fetch from 'lib/client/fetch';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import AccountPageDescription from 'ui/shared/AccountPageDescription';
-import ContentLoader from 'ui/shared/ContentLoader';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
+import SkeletonAccountMobile from 'ui/shared/SkeletonAccountMobile';
 import SkeletonTable from 'ui/shared/SkeletonTable';
 
 import DeletePrivateTagModal from './DeletePrivateTagModal';
@@ -55,7 +55,7 @@ const PrivateTransactionTags = () => {
   );
 
   if (isLoading && !transactionTagsData) {
-    const loader = isMobile ? <ContentLoader/> : (
+    const loader = isMobile ? <SkeletonAccountMobile/> : (
       <>
         <SkeletonTable columns={ [ '75%', '25%', '108px' ] }/>
         <Skeleton height="44px" width="156px" marginTop={ 8 }/>

ui/publicTags/PublicTagsData.tsx

@@ -8,8 +8,8 @@ import fetch from 'lib/client/fetch';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import PublicTagListItem from 'ui/publicTags/PublicTagTable/PublicTagListItem';
 import AccountPageDescription from 'ui/shared/AccountPageDescription';
-import ContentLoader from 'ui/shared/ContentLoader';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
+import SkeletonAccountMobile from 'ui/shared/SkeletonAccountMobile';
 import SkeletonTable from 'ui/shared/SkeletonTable';
 
 import DeletePublicTagModal from './DeletePublicTagModal';
@@ -55,7 +55,7 @@ const PublicTagsData = ({ changeToFormScreen, onTagDelete }: Props) => {
   );
 
   if (isLoading) {
-    const loader = isMobile ? <ContentLoader/> : (
+    const loader = isMobile ? <SkeletonAccountMobile/> : (
       <>
         <SkeletonTable columns={ [ '50%', '25%', '25%', '108px' ] }/>
         <Skeleton height="48px" width="270px" marginTop={ 8 }/>

ui/shared/SkeletonAccountMobile.tsx

-import { Flex, Skeleton, SkeletonCircle, useColorModeValue } from '@chakra-ui/react';
+import { Box, Flex, Skeleton, SkeletonCircle, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
-const SkeletonAccountMobile = () => {
+interface Props {
+  showFooterSlot?: boolean;
+}
+
+const SkeletonAccountMobile = ({ showFooterSlot }: Props) => {
+  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
+
   return (
-    <Flex
-      rowGap={ 3 }
-      flexDirection="column"
-      paddingY={ 6 }
-      borderTopWidth="1px"
-      borderColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') }
-      _first={{
-        borderTopWidth: '0',
-        pt: '0',
-      }}
-    >
-      <Flex columnGap={ 2 } w="100%" alignItems="center">
-        <SkeletonCircle size="6" flexShrink="0"/>
-        <Skeleton h={ 4 } w="100%"/>
-      </Flex>
-      <Skeleton h={ 4 } w="164px"/>
-      <Skeleton h={ 4 } w="164px"/>
-      <Flex columnGap={ 3 } alignSelf="flex-end" mt={ 7 }>
-        <SkeletonCircle size="6" flexShrink="0"/>
-        <SkeletonCircle size="6" flexShrink="0"/>
-      </Flex>
-    </Flex>
+    <Box>
+      { Array.from(Array(2)).map((item, index) => (
+        <Flex
+          key={ index }
+          rowGap={ 3 }
+          flexDirection="column"
+          paddingY={ 6 }
+          borderTopWidth="1px"
+          borderColor={ borderColor }
+          _first={{
+            borderTopWidth: '0',
+            pt: '0',
+          }}
+        >
+          <Flex columnGap={ 2 } w="100%" alignItems="center">
+            <SkeletonCircle size="6" flexShrink="0"/>
+            <Skeleton h={ 4 } w="100%"/>
+          </Flex>
+          <Skeleton h={ 4 } w="164px"/>
+          <Skeleton h={ 4 } w="164px"/>
+          <Flex columnGap={ 3 } mt={ 7 }>
+            { showFooterSlot && (
+              <Flex alignItems="center" columnGap={ 2 }>
+                <Skeleton h={ 4 } w="164px"/>
+                <SkeletonCircle size="6" flexShrink="0"/>
+              </Flex>
+            ) }
+            <SkeletonCircle size="6" flexShrink="0" ml="auto"/>
+            <SkeletonCircle size="6" flexShrink="0"/>
+          </Flex>
+        </Flex>
+      )) }
+    </Box>
   );
 };