shadow for action bar and long skeleton prop

theme/foundations/semanticTokens.ts

@@ -20,6 +20,9 @@ const semanticTokens = {
       _dark: 'red.300',
     },
   },
+  shadows: {
+    action_bar: '0 4px 4px -4px rgb(0 0 0 / 10%), 0 2px 4px -4px rgb(0 0 0 / 6%)',
+  },
 };
 
 export default semanticTokens;

ui/address/AddressBlocksValidated.tsx

@@ -76,7 +76,7 @@ const AddressBlocksValidated = ({ scrollRef }: Props) => {
       return (
         <>
           <Hide below="lg" ssr={ false }>
-            <SkeletonTable columns={ [ '17%', '17%', '16%', '25%', '25%' ] }/>
+            <SkeletonTable columns={ [ '17%', '17%', '16%', '25%', '25%' ] } isLong/>
           </Hide>
           <Show below="lg" ssr={ false }>
             <SkeletonList/>
@@ -125,7 +125,7 @@ const AddressBlocksValidated = ({ scrollRef }: Props) => {
   return (
     <Box>
       { query.isPaginationVisible && (
-        <ActionBar mt={ -6 }>
+        <ActionBar mt={ -6 } showShadow={ query.isLoading }>
           <Pagination ml="auto" { ...query.pagination }/>
         </ActionBar>
       ) }

ui/address/AddressInternalTxs.tsx

@@ -9,13 +9,13 @@ import getFilterValueFromQuery from 'lib/getFilterValueFromQuery';
 import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import { apos } from 'lib/html-entities';
 import getQueryParamString from 'lib/router/getQueryParamString';
-import AddressIntTxsSkeletonDesktop from 'ui/address/internals/AddressIntTxsSkeletonDesktop';
-import AddressIntTxsSkeletonMobile from 'ui/address/internals/AddressIntTxsSkeletonMobile';
 import AddressIntTxsTable from 'ui/address/internals/AddressIntTxsTable';
 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/skeletons/SkeletonTable';
 
 import AddressCsvExportLink from './AddressCsvExportLink';
 import AddressTxsFilter from './AddressTxsFilter';
@@ -51,8 +51,12 @@ const AddressInternalTxs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivE
     if (isLoading) {
       return (
         <>
-          <Show below="lg" ssr={ false }><AddressIntTxsSkeletonMobile/></Show>
-          <Hide below="lg" ssr={ false }><AddressIntTxsSkeletonDesktop/></Hide>
+          <Show below="lg" ssr={ false }>
+            <SkeletonList/>
+          </Show>
+          <Hide below="lg" ssr={ false }>
+            <SkeletonTable columns={ [ '15%', '15%', '10%', '20%', '20%', '20%' ] } isLong/>
+          </Hide>
         </>
       );
     }
@@ -79,7 +83,7 @@ const AddressInternalTxs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivE
 
   return (
     <>
-      <ActionBar mt={ -6 } justifyContent="left">
+      <ActionBar mt={ -6 } justifyContent="left" showShadow={ isLoading }>
         <AddressTxsFilter
           defaultFilter={ filterValue }
           onFilterChange={ handleFilterChange }

ui/address/AddressLogs.tsx

@@ -25,7 +25,7 @@ const AddressLogs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivElement>
   }
 
   const bar = isPaginationVisible ? (
-    <ActionBar mt={ -6 }>
+    <ActionBar mt={ -6 } showShadow>
       <Pagination ml="auto" { ...pagination }/>
     </ActionBar>
   ) : null;

ui/address/AddressTokenTransfers.tsx

@@ -169,7 +169,7 @@ const AddressTokenTransfers = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLD
       return (
         <>
           <Hide below="lg" ssr={ false }>
-            <SkeletonTable columns={ [ '44px', '185px', '160px', '25%', '25%', '25%', '25%' ] }/>
+            <SkeletonTable columns={ [ '44px', '185px', '160px', '25%', '25%', '25%', '25%' ] } isLong/>
           </Hide>
           <Show below="lg" ssr={ false }>
             <SkeletonList/>
@@ -253,7 +253,7 @@ const AddressTokenTransfers = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLD
     <>
       { isMobile && tokenFilterComponent }
       { !isActionBarHidden && (
-        <ActionBar mt={ -6 }>
+        <ActionBar mt={ -6 } showShadow={ isLoading }>
           { !isMobile && tokenFilterComponent }
           { !tokenFilter && (
             <TokenTransferFilter

ui/address/AddressTxs.tsx

@@ -138,7 +138,7 @@ const AddressTxs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivElement>}
   return (
     <>
       { !isMobile && (
-        <ActionBar mt={ -6 }>
+        <ActionBar mt={ -6 } showShadow={ addressTxsQuery.isLoading }>
           { filter }
           { currentAddress && <AddressCsvExportLink address={ currentAddress } type="transactions" ml="auto"/> }
           { addressTxsQuery.isPaginationVisible && <Pagination { ...addressTxsQuery.pagination } ml={ 8 }/> }
@@ -153,6 +153,7 @@ const AddressTxs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivElement>}
         socketInfoAlert={ socketAlert }
         socketInfoNum={ newItemsCount }
         top={ 80 }
+        hasLongSkeleton
       />
     </>
   );

ui/address/internals/AddressIntTxsSkeletonDesktop.tsx

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

ui/address/internals/AddressIntTxsSkeletonMobile.tsx

-import { Skeleton, SkeletonCircle, Flex, Box } from '@chakra-ui/react';
-import React from 'react';
-
-const TxInternalsSkeletonMobile = () => {
-  return (
-    <Box>
-      { Array.from(Array(2)).map((item, index) => (
-        <Flex
-          key={ index }
-          rowGap={ 3 }
-          flexDirection="column"
-          paddingY={ 6 }
-          borderTopWidth="1px"
-          borderColor="divider"
-          _last={{
-            borderBottomWidth: '1px',
-          }}
-        >
-          <Flex h={ 6 }>
-            <Skeleton w="100px" mr={ 2 }/>
-            <Skeleton w="90px"/>
-          </Flex>
-          <Flex h={ 6 }>
-            <Skeleton w="100%" mr={ 2 }/>
-            <Skeleton w="60px"/>
-          </Flex>
-          <Flex h={ 6 }>
-            <Skeleton w="70px" mr={ 2 }/>
-            <Skeleton w="30px"/>
-          </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>
-      )) }
-    </Box>
-  );
-};
-
-export default TxInternalsSkeletonMobile;

ui/pages/Token.tsx

@@ -112,6 +112,19 @@ const TokenPageContent = () => {
 
   const tokenSymbolText = tokenQuery.data?.symbol ? ` (${ trimTokenSymbol(tokenQuery.data.symbol) })` : '';
 
+  const tabListProps = React.useCallback(({ isSticky, activeTabIndex }: { isSticky: boolean; activeTabIndex: number }) => {
+    if (isMobile) {
+      return { mt: 8 };
+    }
+
+    return {
+      mt: 3,
+      py: 5,
+      marginBottom: 0,
+      boxShadow: activeTabIndex === 2 && isSticky ? 'action_bar' : 'none',
+    };
+  }, [ isMobile ]);
+
   return (
     <Page>
       { tokenQuery.isLoading ? (
@@ -141,7 +154,7 @@ const TokenPageContent = () => {
       { tokenQuery.isLoading ? <SkeletonTabs/> : (
         <RoutedTabs
           tabs={ tabs }
-          tabListProps={ isMobile ? { mt: 8 } : { mt: 3, py: 5, marginBottom: 0 } }
+          tabListProps={ tabListProps }
           rightSlot={ !isMobile && hasPagination ? <Pagination { ...(pagination as PaginationProps) }/> : null }
           stickyEnabled={ !isMobile }
         />

ui/shared/ActionBar.tsx

@@ -7,12 +7,13 @@ import useIsSticky from 'lib/hooks/useIsSticky';
 type Props = {
   children: React.ReactNode;
   className?: string;
+  showShadow?: boolean;
 }
 
 const TOP_UP = 106;
 const TOP_DOWN = 0;
 
-const ActionBar = ({ children, className }: Props) => {
+const ActionBar = ({ children, className, showShadow }: Props) => {
   const ref = React.useRef<HTMLDivElement>(null);
   const scrollDirection = useScrollDirection();
   const isSticky = useIsSticky(ref, TOP_UP + 5);
@@ -38,7 +39,7 @@ const ActionBar = ({ children, className }: Props) => {
       zIndex={{ base: 'sticky2', lg: 'docked' }}
       boxShadow={{
         base: isSticky ? 'md' : 'none',
-        lg: isSticky ? '0 4px 6px -6px rgb(0 0 0 / 10%), 0 2px 4px -4px rgb(0 0 0 / 6%)' : 'none',
+        lg: isSticky && showShadow ? 'action_bar' : 'none',
       }}
       ref={ ref }
     >

ui/shared/RoutedTabs/RoutedTabs.tsx

@@ -32,7 +32,7 @@ const hiddenItemStyles: StyleProps = {
 
 interface Props extends ThemingProps<'Tabs'> {
   tabs: Array<RoutedTab>;
-  tabListProps?: ChakraProps | (({ isSticky }: { isSticky: boolean }) => ChakraProps);
+  tabListProps?: ChakraProps | (({ isSticky, activeTabIndex }: { isSticky: boolean; activeTabIndex: number }) => ChakraProps);
   rightSlot?: React.ReactNode;
   stickyEnabled?: boolean;
   className?: string;
@@ -155,7 +155,7 @@ const RoutedTabs = ({ tabs, tabListProps, rightSlot, stickyEnabled, className, .
             zIndex: { base: 'sticky2', lg: 'docked' },
           } : { })
         }
-        { ...(typeof tabListProps === 'function' ? tabListProps({ isSticky }) : tabListProps) }
+        { ...(typeof tabListProps === 'function' ? tabListProps({ isSticky, activeTabIndex }) : tabListProps) }
       >
         { tabsList.map((tab, index) => {
           if (!tab.id) {

ui/shared/skeletons/SkeletonTable.tsx

@@ -4,13 +4,16 @@ import React from 'react';
 interface Props {
   columns: Array<string>;
   className?: string;
+  isLong?: boolean;
 }
 
-const SkeletonTable = ({ columns, className }: Props) => {
+const SkeletonTable = ({ columns, className, isLong }: Props) => {
+  const rowsNum = isLong ? 50 : 3;
+
   return (
     <Box className={ className }>
       <Skeleton height={ 10 } width="100%" borderBottomLeftRadius="none" borderBottomRightRadius="none"/>
-      { Array.from(Array(50)).map((item, index) => (
+      { Array.from(Array(rowsNum)).map((item, index) => (
         <HStack key={ index } spacing={ 6 } marginTop={ 8 }>
           { columns.map((width, index) => (
             <Skeleton

ui/token/TokenHolders/TokenHolders.tsx

@@ -42,7 +42,7 @@ const TokenHoldersContent = ({ holdersQuery, tokenQuery }: Props) => {
         { bar }
         { isMobile && <SkeletonList/> }
         { !isMobile && (
-          <SkeletonTable columns={ [ '100%', '300px', '175px' ] }/>
+          <SkeletonTable columns={ [ '100%', '300px', '175px' ] } isLong/>
         ) }
       </>
     );

ui/token/TokenTransfer/TokenTransfer.tsx

@@ -66,8 +66,7 @@ const TokenTransfer = ({ transfersQuery, tokenId }: Props) => {
       return (
         <>
           <Hide below="lg" ssr={ false }>
-            <SkeletonTable columns={ [ '45%', '15%', '36px', '15%', '25%' ] }
-            />
+            <SkeletonTable columns={ [ '45%', '15%', '36px', '15%', '25%' ] } isLong/>
           </Hide>
           <Show below="lg" ssr={ false }>
             <SkeletonList/>

ui/txs/TxsContent.tsx

@@ -32,6 +32,7 @@ type Props = {
   filter?: React.ReactNode;
   enableTimeIncrement?: boolean;
   top?: number;
+  hasLongSkeleton?: boolean;
 }
 
 const TxsContent = ({
@@ -43,6 +44,7 @@ const TxsContent = ({
   socketInfoNum,
   currentAddress,
   enableTimeIncrement,
+  hasLongSkeleton,
   top,
 }: Props) => {
   const { data, isLoading, isError, setSortByField, setSortByValue, sorting } = useTxsSort(query);
@@ -58,10 +60,13 @@ const TxsContent = ({
         <>
           <Show below="lg" ssr={ false }><SkeletonList/></Show>
           <Hide below="lg" ssr={ false }>
-            <SkeletonTable columns={ showBlockInfo ?
-              [ '32px', '22%', '160px', '20%', '18%', '292px', '20%', '20%' ] :
-              [ '32px', '22%', '160px', '20%', '292px', '20%', '20%' ]
-            }/>
+            <SkeletonTable
+              columns={ showBlockInfo ?
+                [ '32px', '22%', '160px', '20%', '18%', '292px', '20%', '20%' ] :
+                [ '32px', '22%', '160px', '20%', '292px', '20%', '20%' ]
+              }
+              isLong={ hasLongSkeleton }
+            />
           </Hide>
         </>
       );