skeleton for tabs

ui/pages/Token.tsx

@@ -173,14 +173,16 @@ const TokenPageContent = () => {
       { /* should stay before tabs to scroll up with pagination */ }
       <Box ref={ scrollRef }></Box>
 
-      { tokenQuery.isLoading || contractQuery.isLoading ? <SkeletonTabs/> : (
-        <RoutedTabs
-          tabs={ tabs }
-          tabListProps={ tabListProps }
-          rightSlot={ !isMobile && hasPagination ? <Pagination { ...(pagination as PaginationProps) }/> : null }
-          stickyEnabled={ !isMobile }
-        />
-      ) }
+      { tokenQuery.isPlaceholderData || contractQuery.isPlaceholderData ?
+        <SkeletonTabs tabs={ tabs }/> :
+        (
+          <RoutedTabs
+            tabs={ tabs }
+            tabListProps={ tabListProps }
+            rightSlot={ !isMobile && hasPagination ? <Pagination { ...(pagination as PaginationProps) }/> : null }
+            stickyEnabled={ !isMobile }
+          />
+        ) }
 
       { !tokenQuery.isLoading && !tokenQuery.isError && <Box h={{ base: 0, lg: '40vh' }}/> }
     </>

ui/shared/RoutedTabs/RoutedTabs.tsx

@@ -175,6 +175,7 @@ const RoutedTabs = ({ tabs, tabListProps, rightSlot, stickyEnabled, className, .
                 }
                 onItemClick={ handleTabChange }
                 buttonRef={ tabsRefs[index] }
+                size={ themeProps.size || 'md' }
               />
             );
           }

ui/shared/RoutedTabs/RoutedTabsMenu.tsx

@@ -1,3 +1,5 @@
+import type {
+  ButtonProps } from '@chakra-ui/react';
 import { Popover,
   PopoverTrigger,
   PopoverContent,
@@ -20,9 +22,10 @@ interface Props {
   styles?: StyleProps;
   onItemClick: (index: number) => void;
   buttonRef: React.RefObject<HTMLButtonElement>;
+  size: ButtonProps['size'];
 }
 
-const RoutedTabsMenu = ({ tabs, tabsCut, isActive, styles, onItemClick, buttonRef, activeTab }: Props) => {
+const RoutedTabsMenu = ({ tabs, tabsCut, isActive, styles, onItemClick, buttonRef, activeTab, size }: Props) => {
   const { isOpen, onClose, onOpen } = useDisclosure();
 
   const handleItemClick = React.useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
@@ -40,6 +43,7 @@ const RoutedTabsMenu = ({ tabs, tabsCut, isActive, styles, onItemClick, buttonRe
           variant="ghost"
           isActive={ isOpen || isActive }
           ref={ buttonRef }
+          size={ size }
           { ...styles }
         >
           { menuButton.title }

ui/shared/skeletons/SkeletonTabs.tsx

@@ -1,11 +1,42 @@
 import { Flex, Skeleton, chakra } from '@chakra-ui/react';
 import React from 'react';
 
+import type { RoutedTab } from '../RoutedTabs/types';
+
 interface Props {
   className?: string;
+  tabs?: Array<RoutedTab>;
+  size?: 'sm' | 'md';
 }
 
-const SkeletonTabs = ({ className }: Props) => {
+const SkeletonTabs = ({ className, tabs, size = 'md' }: Props) => {
+  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">
+        { tabs.map(({ title, id }, index) => (
+          <Skeleton
+            key={ id }
+            py={ index === 0 ? paddingVert : 0 }
+            px={ index === 0 ? paddingHor : 0 }
+            mx={ index === 0 ? 0 : paddingHor }
+            borderRadius="base"
+            fontWeight={ 600 }
+            borderWidth={ size === 'sm' ? '2px' : 0 }
+          >
+            { typeof title === 'string' ? title : title() }
+          </Skeleton>
+        )) }
+      </Flex>
+    );
+  }
+
   return (
     <Flex my={ 8 } className={ className }>
       <Skeleton h={ 6 } my={ 2 } mx={ 4 } w="100px"/>