simplify skeleton tabs

ui/marketplace/MarketplaceAppCardSkeleton.tsx

-import { Box, Heading, Skeleton, SkeletonCircle, useColorModeValue } from '@chakra-ui/react';
-import React from 'react';
-
-const MarketplaceAppCardSkeleton = () => {
-  return (
-    <Box
-      borderRadius="md"
-      height="100%"
-      padding={{ base: 3, sm: '20px' }}
-      border="1px"
-      borderColor={ useColorModeValue('gray.200', 'gray.600') }
-    >
-      <Box
-        display={{ base: 'grid', sm: 'block' }}
-        gridTemplateColumns={{ base: '64px 1fr', sm: '1fr' }}
-        gridTemplateRows={{ base: '20px 20px auto', sm: 'none' }}
-        gridRowGap={{ base: 2, sm: 'none' }}
-        gridColumnGap={{ base: 4, sm: 'none' }}
-        height="100%"
-      >
-        <Box
-          gridRow={{ base: '1 / 4', sm: 'auto' }}
-          marginBottom={ 4 }
-          w={{ base: '64px', sm: '96px' }}
-          h={{ base: '64px', sm: '96px' }}
-        >
-          <SkeletonCircle w="100%" h="100%"/>
-        </Box>
-
-        <Heading
-          gridColumn={{ base: 2, sm: 'auto' }}
-          marginBottom={ 2 }
-        >
-          <Skeleton h={ 4 } w="50%"/>
-        </Heading>
-
-        <Box>
-          <Skeleton h={ 4 } mb={ 1 }/>
-          <Skeleton h={ 4 } mb={ 1 }/>
-          <Skeleton h={ 4 } w="50%"/>
-        </Box>
-      </Box>
-    </Box>
-  );
-};
-
-export default MarketplaceAppCardSkeleton;

ui/pages/Address.tsx

@@ -27,8 +27,8 @@ import TextAd from 'ui/shared/ad/TextAd';
 import EntityTags from 'ui/shared/EntityTags';
 import NetworkExplorers from 'ui/shared/NetworkExplorers';
 import PageTitle from 'ui/shared/Page/PageTitle';
-import SkeletonTabs from 'ui/shared/skeletons/SkeletonTabs';
 import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
+import TabsSkeleton from 'ui/shared/Tabs/TabsSkeleton';
 
 export const tokenTabsByType: Record<TokenType, string> = {
   'ERC-20': 'tokens_erc20',
@@ -134,7 +134,7 @@ const AddressPageContent = () => {
       <AddressDetails addressQuery={ addressQuery } scrollRef={ tabsScrollRef }/>
       { /* should stay before tabs to scroll up with pagination */ }
       <Box ref={ tabsScrollRef }></Box>
-      { addressQuery.isPlaceholderData ? <SkeletonTabs tabs={ tabs }/> : content }
+      { addressQuery.isPlaceholderData ? <TabsSkeleton tabs={ tabs }/> : content }
     </>
   );
 };

ui/pages/Block.tsx

@@ -20,8 +20,8 @@ import NetworkExplorers from 'ui/shared/NetworkExplorers';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import type { Props as PaginationProps } from 'ui/shared/Pagination';
 import Pagination from 'ui/shared/Pagination';
-import SkeletonTabs from 'ui/shared/skeletons/SkeletonTabs';
 import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
+import TabsSkeleton from 'ui/shared/Tabs/TabsSkeleton';
 import TxsContent from 'ui/txs/TxsContent';
 
 const TAB_LIST_PROPS = {
@@ -120,7 +120,7 @@ const BlockPageContent = () => {
         contentAfter={ <NetworkExplorers type="block" pathParam={ heightOrHash } ml={{ base: 'initial', lg: 'auto' }}/> }
         isLoading={ blockQuery.isPlaceholderData }
       />
-      { blockQuery.isPlaceholderData ? <SkeletonTabs tabs={ tabs }/> : (
+      { blockQuery.isPlaceholderData ? <TabsSkeleton tabs={ tabs }/> : (
         <RoutedTabs
           tabs={ tabs }
           tabListProps={ isMobile ? undefined : TAB_LIST_PROPS }

ui/pages/Token.tsx

@@ -28,8 +28,8 @@ import NetworkExplorers from 'ui/shared/NetworkExplorers';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import type { Props as PaginationProps } from 'ui/shared/Pagination';
 import Pagination from 'ui/shared/Pagination';
-import SkeletonTabs from 'ui/shared/skeletons/SkeletonTabs';
 import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
+import TabsSkeleton from 'ui/shared/Tabs/TabsSkeleton';
 import TokenLogo from 'ui/shared/TokenLogo';
 import TokenContractInfo from 'ui/token/TokenContractInfo';
 import TokenDetails from 'ui/token/TokenDetails';
@@ -275,7 +275,7 @@ const TokenPageContent = () => {
       <Box ref={ scrollRef }></Box>
 
       { tokenQuery.isPlaceholderData || contractQuery.isPlaceholderData ?
-        <SkeletonTabs tabs={ tabs }/> :
+        <TabsSkeleton tabs={ tabs }/> :
         (
           <RoutedTabs
             tabs={ tabs }

ui/pages/TokenInstance.tsx

@@ -19,8 +19,8 @@ import LinkExternal from 'ui/shared/LinkExternal';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import Pagination from 'ui/shared/Pagination';
 import type { Props as PaginationProps } from 'ui/shared/Pagination';
-import SkeletonTabs from 'ui/shared/skeletons/SkeletonTabs';
 import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
+import TabsSkeleton from 'ui/shared/Tabs/TabsSkeleton';
 import TokenHolders from 'ui/token/TokenHolders/TokenHolders';
 import TokenTransfer from 'ui/token/TokenTransfer/TokenTransfer';
 import TokenInstanceDetails from 'ui/tokenInstance/TokenInstanceDetails';
@@ -175,7 +175,7 @@ const TokenInstanceContent = () => {
       { /* should stay before tabs to scroll up with pagination */ }
       <Box ref={ scrollRef }></Box>
 
-      { tokenInstanceQuery.isPlaceholderData ? <SkeletonTabs tabs={ tabs }/> : (
+      { tokenInstanceQuery.isPlaceholderData ? <TabsSkeleton tabs={ tabs }/> : (
         <RoutedTabs
           tabs={ tabs }
           tabListProps={ isMobile ? { mt: 8 } : { mt: 3, py: 5, marginBottom: 0 } }

ui/shared/Tabs/TabsSkeleton.tsx

+import { Flex, Skeleton, chakra, Box, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import type { RoutedTab } from '../Tabs/types';
+
+import useTabIndexFromQuery from 'ui/shared/Tabs/useTabIndexFromQuery';
+
+type TabSize = 'sm' | 'md';
+
+const SkeletonTabText = ({ size, title }: { size: TabSize; title: RoutedTab['title'] }) => (
+  <Skeleton
+    borderRadius="base"
+    borderWidth={ size === 'sm' ? '2px' : 0 }
+    fontWeight={ 600 }
+    mx={ size === 'sm' ? 3 : 4 }
+    flexShrink={ 0 }
+  >
+    { typeof title === 'string' ? title : title() }
+  </Skeleton>
+);
+
+interface Props {
+  className?: string;
+  tabs: Array<RoutedTab>;
+  size?: 'sm' | 'md';
+}
+
+const TabsSkeleton = ({ className, tabs, size = 'md' }: Props) => {
+  const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+  const tabIndex = useTabIndexFromQuery(tabs || []);
+
+  if (tabs.length === 1) {
+    return null;
+  }
+
+  return (
+    <Flex className={ className } my={ 8 } alignItems="center" overflow="hidden">
+      { tabs.slice(0, tabIndex).map(({ title, id }) => (
+        <SkeletonTabText
+          key={ id }
+          title={ title }
+          size={ size }
+        />
+      )) }
+      { tabs.slice(tabIndex, tabIndex + 1).map(({ title, id }) => (
+        <Box key={ id } bgColor={ bgColor } py={ size === 'sm' ? 1 : 2 } borderRadius="base" flexShrink={ 0 }>
+          <SkeletonTabText
+            key={ id }
+            title={ title }
+            size={ size }
+          />
+        </Box>
+      )) }
+      { tabs.slice(tabIndex + 1).map(({ title, id }) => (
+        <SkeletonTabText
+          key={ id }
+          title={ title }
+          size={ size }
+        />
+      )) }
+    </Flex>
+  );
+};
+
+export default chakra(TabsSkeleton);

ui/shared/skeletons/DetailsSkeletonRow.tsx

-import { GridItem, Skeleton, SkeletonCircle } from '@chakra-ui/react';
-import React from 'react';
-
-const DetailsSkeletonRow = ({ w = '100%', maxW }: { w?: string; maxW?: string }) => {
-  return (
-    <>
-      <GridItem display="flex" columnGap={ 2 } w={{ base: '50%', lg: 'auto' }} _notFirst={{ mt: { base: 3, lg: 0 } }}>
-        <SkeletonCircle h={ 5 } w={ 5 }/>
-        <Skeleton flexGrow={ 1 } h={ 5 } borderRadius="full"/>
-      </GridItem>
-      <GridItem pl={{ base: 7, lg: 0 }}>
-        <Skeleton h={ 5 } borderRadius="full" w={{ base: '100%', lg: w }} maxW={ maxW }/>
-      </GridItem>
-    </>
-  );
-};
-
-export default DetailsSkeletonRow;

ui/shared/skeletons/SkeletonTabs.tsx

-import { Flex, Skeleton, chakra, Box, useColorModeValue } from '@chakra-ui/react';
-import React from 'react';
-
-import type { RoutedTab } from '../Tabs/types';
-
-import useTabIndexFromQuery from 'ui/shared/Tabs/useTabIndexFromQuery';
-
-interface Props {
-  className?: string;
-  tabs?: Array<RoutedTab>;
-  size?: 'sm' | 'md';
-}
-
-const SkeletonTabs = ({ className, tabs, size = 'md' }: Props) => {
-  const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
-  const tabIndex = useTabIndexFromQuery(tabs || []);
-
-  if (tabs) {
-    if (tabs.length === 1) {
-      return null;
-    }
-
-    const paddingHor = size === 'sm' ? 3 : 4;
-    const paddingVert = size === 'sm' ? 1 : 2;
-
-    return (
-      <Flex className={ className } my={ 8 } alignItems="center" overflow="hidden">
-        { tabs.slice(0, tabIndex).map(({ title, id }) => (
-          <Skeleton
-            key={ id }
-            mx={ paddingHor }
-            borderRadius="base"
-            fontWeight={ 600 }
-            borderWidth={ size === 'sm' ? '2px' : 0 }
-            flexShrink={ 0 }
-          >
-            { typeof title === 'string' ? title : title() }
-          </Skeleton>
-        )) }
-        { tabs.slice(tabIndex, tabIndex + 1).map(({ title, id }) => (
-          <Box key={ id } bgColor={ bgColor } px={ paddingHor } py={ paddingVert } borderRadius="base" flexShrink={ 0 }>
-            <Skeleton borderRadius="base" borderWidth={ size === 'sm' ? '2px' : 0 }>
-              { typeof title === 'string' ? title : title() }
-            </Skeleton>
-          </Box>
-        )) }
-        { tabs.slice(tabIndex + 1).map(({ title, id }) => (
-          <Skeleton
-            key={ id }
-            mx={ paddingHor }
-            borderRadius="base"
-            fontWeight={ 600 }
-            borderWidth={ size === 'sm' ? '2px' : 0 }
-            flexShrink={ 0 }
-          >
-            { typeof title === 'string' ? title : title() }
-          </Skeleton>
-        )) }
-      </Flex>
-    );
-  }
-
-  return (
-    <Flex my={ 8 } className={ className }>
-      <Skeleton h={ 6 } my={ 2 } mx={ 4 } w="100px"/>
-      <Skeleton h={ 6 } my={ 2 } mx={ 4 } w="120px"/>
-      <Skeleton h={ 6 } my={ 2 } mx={ 4 } w="80px" display={{ base: 'none', lg: 'block' }}/>
-      <Skeleton h={ 6 } my={ 2 } mx={ 4 } w="100px" display={{ base: 'none', lg: 'block' }}/>
-      <Skeleton h={ 6 } my={ 2 } mx={ 4 } w="140px" display={{ base: 'none', lg: 'block' }}/>
-    </Flex>
-  );
-};
-
-export default chakra(SkeletonTabs);