long skeleton, first attempt

lib/hooks/useQueryWithPages.ts

@@ -5,7 +5,7 @@ import omit from 'lodash/omit';
 import pick from 'lodash/pick';
 import { useRouter } from 'next/router';
 import React, { useCallback } from 'react';
-import { animateScroll } from 'react-scroll';
+// import { animateScroll } from 'react-scroll';
 
 import type { PaginatedResources, PaginatedResponse, PaginationFilters } from 'lib/api/resources';
 import { RESOURCES } from 'lib/api/resources';
@@ -25,7 +25,7 @@ export default function useQueryWithPages<Resource extends PaginatedResources>({
   filters,
   options,
   pathParams,
-  scrollRef,
+  // scrollRef,
 }: Params<Resource>) {
   const resource = RESOURCES[resourceName];
   const queryClient = useQueryClient();
@@ -47,8 +47,8 @@ export default function useQueryWithPages<Resource extends PaginatedResources>({
   const queryParams = { ...pageParams[page], ...filters };
 
   const scrollToTop = useCallback(() => {
-    scrollRef?.current ? scrollRef.current.scrollIntoView(true) : animateScroll.scrollToTop({ duration: 0 });
-  }, [ scrollRef ]);
+    // scrollRef?.current ? scrollRef.current.scrollIntoView(true) : animateScroll.scrollToTop({ duration: 0 });
+  }, [ ]);
 
   const queryResult = useApiQuery(resourceName, {
     pathParams,

theme/foundations/zIndices.ts

@@ -3,6 +3,7 @@ const zIndices = {
   auto: 'auto',
   base: 0,
   docked: 10,
+  overDocked: 11,
   tooltip: 900,
   dropdown: 1000,
   sticky: 1100,

ui/address/AddressTxs.tsx

@@ -152,6 +152,7 @@ const AddressTxs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivElement>}
         showSocketInfo={ addressTxsQuery.pagination.page === 1 }
         socketInfoAlert={ socketAlert }
         socketInfoNum={ newItemsCount }
+        top={ 80 }
       />
     </>
   );

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/shared/ActionBar.tsx

@@ -36,7 +36,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 ? '0 4px 6px -6px rgb(0 0 0 / 10%), 0 2px 4px -4px rgb(0 0 0 / 6%)' : 'none',
+      }}
       ref={ ref }
     >
       { children }

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: 'overDocked',
   };
 
   return (

ui/shared/skeletons/SkeletonTable.tsx

@@ -10,7 +10,7 @@ const SkeletonTable = ({ columns, className }: Props) => {
   return (
     <Box className={ className }>
       <Skeleton height={ 10 } width="100%" borderBottomLeftRadius="none" borderBottomRightRadius="none"/>
-      { Array.from(Array(3)).map((item, index) => (
+      { Array.from(Array(50)).map((item, index) => (
         <HStack key={ index } spacing={ 6 } marginTop={ 8 }>
           { columns.map((width, index) => (
             <Skeleton

ui/txs/TxsContent.tsx

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