Merge pull request #625 from blockscout/long-skeleton

long skeleton

icons/files/placeholder.svg

 <svg viewBox="0 0 51 50" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path fill-rule="evenodd" clip-rule="evenodd" d="M11.693 5.058c.498-.57 1.172-.891 1.875-.891h15.91c.351 0 .688.16.937.446l9.28 10.657c.249.285.388.672.388 1.076v24.36c0 .807-.279 1.581-.776 2.152-.498.571-1.172.892-1.875.892H13.568c-.703 0-1.377-.32-1.875-.892-.497-.57-.776-1.345-.776-2.153V7.212c0-.808.28-1.582.776-2.154Zm17.235 2.154h-15.36v33.493h23.864V16.977l-8.504-9.765Z" fill="currentColor"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M28.556 5c.767 0 1.389.622 1.389 1.389v8.333h8.333a1.389 1.389 0 0 1 0 2.778h-9.722a1.389 1.389 0 0 1-1.39-1.389V6.39c0-.767.623-1.389 1.39-1.389ZM22.46 25.151a1.326 1.326 0 0 0-1.875 1.875l3.04 3.04-3.04 3.04a1.326 1.326 0 0 0 1.875 1.875l3.04-3.04 3.04 3.04a1.326 1.326 0 0 0 1.875-1.875l-3.04-3.04 3.04-3.04a1.326 1.326 0 0 0-1.875-1.875l-3.04 3.04-3.04-3.04Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M28.556 5a1.39 1.39 0 0 1 1.389 1.389v8.333h8.333a1.389 1.389 0 0 1 0 2.778h-9.722a1.389 1.389 0 0 1-1.39-1.389V6.39a1.39 1.39 0 0 1 1.39-1.389ZM22.46 25.151a1.326 1.326 0 0 0-1.875 1.875l3.04 3.04-3.04 3.04a1.326 1.326 0 0 0 1.875 1.875l3.04-3.04 3.04 3.04a1.326 1.326 0 0 0 1.875-1.875l-3.04-3.04 3.04-3.04a1.326 1.326 0 0 0-1.875-1.875l-3.04 3.04-3.04-3.04Z" fill="currentColor"/>
 </svg>

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';
@@ -43,29 +43,33 @@ const AddressInternalTxs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivE
     onFilterChange({ filter: newVal });
   }, [ onFilterChange ]);
 
-  if (isLoading) {
-    return (
-      <>
-        <Show below="lg" ssr={ false }><AddressIntTxsSkeletonMobile/></Show>
-        <Hide below="lg" ssr={ false }><AddressIntTxsSkeletonDesktop/></Hide>
-      </>
-    );
-  }
+  const content = (() => {
+    if (isError) {
+      return <DataFetchAlert/>;
+    }
+
+    if (isLoading) {
+      return (
+        <>
+          <Show below="lg" ssr={ false }>
+            <SkeletonList/>
+          </Show>
+          <Hide below="lg" ssr={ false }>
+            <SkeletonTable columns={ [ '15%', '15%', '10%', '20%', '20%', '20%' ] } isLong/>
+          </Hide>
+        </>
+      );
+    }
+
+    if (data.items.length === 0 && !filterValue) {
+      return <Text as="span">There are no internal transactions for this address.</Text>;
+    }
+
+    if (data.items.length === 0) {
+      return <EmptySearchResult text={ `Couldn${ apos }t find any transaction that matches your query.` }/>;
+    }
 
-  if (isError) {
-    return <DataFetchAlert/>;
-  }
-
-  if (data.items.length === 0 && !filterValue) {
-    return <Text as="span">There are no internal transactions for this address.</Text>;
-  }
-
-  let content;
-
-  if (data.items.length === 0) {
-    content = <EmptySearchResult text={ `Couldn${ apos }t find any transaction that matches your query.` }/>;
-  } else {
-    content = (
+    return (
       <>
         <Show below="lg" ssr={ false }>
           <AddressIntTxsList data={ data.items } currentAddress={ hash }/>
@@ -75,11 +79,11 @@ const AddressInternalTxs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivE
         </Hide>
       </>
     );
-  }
+  })();
 
   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 }/> }
@@ -152,6 +152,8 @@ const AddressTxs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivElement>}
         showSocketInfo={ addressTxsQuery.pagination.page === 1 }
         socketInfoAlert={ socketAlert }
         socketInfoNum={ newItemsCount }
+        top={ 80 }
+        hasLongSkeleton
       />
     </>
   );

ui/address/coinBalance/AddressCoinBalanceHistory.tsx

@@ -43,6 +43,10 @@ const AddressCoinBalanceHistory = ({ query }: Props) => {
       return <DataFetchAlert/>;
     }
 
+    if (query.data.items.length === 0 && !query.isPaginationVisible) {
+      return <span>There is no coin balance history for this address</span>;
+    }
+
     return (
       <>
         <Hide below="lg" ssr={ false }>

ui/address/details/AddressNameInfo.tsx

@@ -20,7 +20,7 @@ const AddressNameInfo = ({ data }: Props) => {
         hint="Token name and symbol"
       >
         <LinkInternal href={ route({ pathname: '/token/[hash]', query: { hash: data.token.address } }) }>
-          { data.token.name }{ symbol }
+          { data.token.name || 'Unnamed token' }{ symbol }
         </LinkInternal>
       </DetailsInfoItem>
     );

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/Address.tsx

@@ -116,6 +116,7 @@ const AddressPageContent = () => {
       { /* should stay before tabs to scroll up whith pagination */ }
       <Box ref={ tabsScrollRef }></Box>
       { addressQuery.isLoading ? <SkeletonTabs/> : content }
+      { !addressQuery.isLoading && !addressQuery.isError && <Box h={{ base: 0, lg: '40vh' }}/> }
     </Page>
   );
 };

ui/pages/Token.tsx

@@ -140,6 +140,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 ? (
@@ -172,11 +185,13 @@ const TokenPageContent = () => {
       { tokenQuery.isLoading || contractQuery.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 }
         />
       ) }
+
+      { !tokenQuery.isLoading && !tokenQuery.isError && <Box h={{ base: 0, lg: '40vh' }}/> }
     </Page>
   );
 };

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);
@@ -36,7 +37,10 @@ const ActionBar = ({ children, className }: Props) => {
       transitionProperty="top,box-shadow,background-color,color"
       transitionDuration="normal"
       zIndex={{ base: 'sticky2', lg: 'docked' }}
-      boxShadow={{ base: isSticky ? 'md' : 'none', lg: 'none' }}
+      boxShadow={{
+        base: isSticky ? 'md' : 'none',
+        lg: isSticky && showShadow ? 'action_bar' : 'none',
+      }}
       ref={ ref }
     >
       { children }

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/TheadSticky.tsx

@@ -36,7 +36,7 @@ const TheadSticky = ({ top, children, ...restProps }: Props) => {
     top: `${ top }px` || 0,
     backgroundColor: useColorModeValue('white', 'black'),
     boxShadow: isSticky ? 'md' : 'none',
-    zIndex: 1,
+    zIndex: '1',
   };
 
   return (

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(3)).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

@@ -31,6 +31,8 @@ type Props = {
   currentAddress?: string;
   filter?: React.ReactNode;
   enableTimeIncrement?: boolean;
+  top?: number;
+  hasLongSkeleton?: boolean;
 }
 
 const TxsContent = ({
@@ -42,6 +44,8 @@ const TxsContent = ({
   socketInfoNum,
   currentAddress,
   enableTimeIncrement,
+  hasLongSkeleton,
+  top,
 }: Props) => {
   const { data, isLoading, isError, setSortByField, setSortByValue, sorting } = useTxsSort(query);
   const isMobile = useIsMobile();
@@ -56,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>
         </>
       );
@@ -105,7 +112,7 @@ const TxsContent = ({
             showSocketInfo={ showSocketInfo }
             socketInfoAlert={ socketInfoAlert }
             socketInfoNum={ socketInfoNum }
-            top={ query.isPaginationVisible ? 80 : 0 }
+            top={ top || query.isPaginationVisible ? 80 : 0 }
             currentAddress={ currentAddress }
             enableTimeIncrement={ enableTimeIncrement }
           />