Token Instance Page: move critical requests to the page root (#1959)

[performance]Token Instance Page move critical requests to the page root Fixes #1938
blockscout · May 29, 2024 · e45a58c · e45a58c
1 parent ae20ab5
commit e45a58c
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 19 deletions.
diff --git a/pages/token/[hash]/instance/[id].tsx b/pages/token/[hash]/instance/[id].tsx
@@ -1,5 +1,4 @@
 import type { GetServerSideProps, NextPage } from 'next';
-import dynamic from 'next/dynamic';
 import React from 'react';
 
 import type { Route } from 'nextjs-routes';
@@ -11,8 +10,7 @@ import fetchApi from 'nextjs/utils/fetchApi';
 
 import config from 'configs/app';
 import getQueryParamString from 'lib/router/getQueryParamString';
-
-const TokenInstance = dynamic(() => import('ui/pages/TokenInstance'), { ssr: false });
+import TokenInstance from 'ui/pages/TokenInstance';
 
 const pathname: Route['pathname'] = '/token/[hash]/instance/[id]';
 

diff --git a/ui/pages/TokenInstance.tsx b/ui/pages/TokenInstance.tsx
@@ -29,7 +29,6 @@ import PageTitle from 'ui/shared/Page/PageTitle';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 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';
@@ -69,7 +68,7 @@ const TokenInstanceContent = () => {
     pathParams: { hash, id },
     scrollRef,
     options: {
-      enabled: Boolean(hash && id && (!tab || tab === 'token_transfers') && !tokenInstanceQuery.isPlaceholderData && tokenInstanceQuery.data),
+      enabled: Boolean(hash && id && (!tab || tab === 'token_transfers')),
       placeholderData: getTokenInstanceTransfersStub(tokenQuery.data?.type, null),
     },
   });
@@ -90,6 +89,8 @@ const TokenInstanceContent = () => {
     },
   });
 
+  const isLoading = tokenInstanceQuery.isPlaceholderData || tokenQuery.isPlaceholderData;
+
   React.useEffect(() => {
     if (tokenInstanceQuery.data && !tokenInstanceQuery.isPlaceholderData && tokenQuery.data && !tokenQuery.isPlaceholderData) {
       metadata.update(
@@ -116,15 +117,15 @@ const TokenInstanceContent = () => {
     {
       id: 'token_transfers',
       title: 'Token transfers',
-      component: <TokenTransfer transfersQuery={ transfersQuery } tokenId={ id } token={ tokenQuery.data }/>,
+      component: <TokenTransfer transfersQuery={ transfersQuery } tokenId={ id } token={ tokenQuery.data } shouldRender={ !isLoading }/>,
     },
     shouldFetchHolders ?
-      { id: 'holders', title: 'Holders', component: <TokenHolders holdersQuery={ holdersQuery } token={ tokenQuery.data }/> } :
+      { id: 'holders', title: 'Holders', component: <TokenHolders holdersQuery={ holdersQuery } token={ tokenQuery.data } shouldRender={ !isLoading }/> } :
       undefined,
     { id: 'metadata', title: 'Metadata', component: (
       <TokenInstanceMetadata
         data={ tokenInstanceQuery.data?.metadata }
-        isPlaceholderData={ tokenInstanceQuery.isPlaceholderData }
+        isPlaceholderData={ isLoading }
       />
     ) },
   ].filter(Boolean);
@@ -141,8 +142,6 @@ const TokenInstanceContent = () => {
     watchlist_address_id: null,
   };
 
-  const isLoading = tokenInstanceQuery.isPlaceholderData || tokenQuery.isPlaceholderData;
-
   const appLink = (() => {
     if (!tokenInstanceQuery.data?.external_app_url) {
       return null;
@@ -226,14 +225,13 @@ const TokenInstanceContent = () => {
       { /* should stay before tabs to scroll up with pagination */ }
       <Box ref={ scrollRef }></Box>
 
-      { isLoading ? <TabsSkeleton tabs={ tabs }/> : (
-        <RoutedTabs
-          tabs={ tabs }
-          tabListProps={ isMobile ? { mt: 8 } : { mt: 3, py: 5, marginBottom: 0 } }
-          rightSlot={ !isMobile && pagination?.isVisible ? <Pagination { ...pagination }/> : null }
-          stickyEnabled={ !isMobile }
-        />
-      ) }
+      <RoutedTabs
+        tabs={ tabs }
+        tabListProps={ isMobile ? { mt: 8 } : { mt: 3, py: 5, marginBottom: 0 } }
+        isLoading={ isLoading }
+        rightSlot={ !isMobile && pagination?.isVisible ? <Pagination { ...pagination }/> : null }
+        stickyEnabled={ !isMobile }
+      />
     </>
   );
 };

diff --git a/ui/tokenInstance/TokenInstanceDetails.tsx b/ui/tokenInstance/TokenInstanceDetails.tsx
@@ -5,6 +5,7 @@ import type { TokenInfo, TokenInstance } from 'types/api/token';
 
 import config from 'configs/app';
 import useFeatureValue from 'lib/growthbook/useFeatureValue';
+import useIsMounted from 'lib/hooks/useIsMounted';
 import AppActionButton from 'ui/shared/AppActionButton/AppActionButton';
 import useAppActionData from 'ui/shared/AppActionButton/useAppActionData';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
@@ -30,6 +31,7 @@ interface Props {
 const TokenInstanceDetails = ({ data, token, scrollRef, isLoading }: Props) => {
   const { value: isActionButtonExperiment } = useFeatureValue('action_button_exp', false);
   const appActionData = useAppActionData(token?.address, isActionButtonExperiment && !isLoading);
+  const isMounted = useIsMounted();
 
   const handleCounterItemClick = React.useCallback(() => {
     window.setTimeout(() => {
@@ -38,7 +40,7 @@ const TokenInstanceDetails = ({ data, token, scrollRef, isLoading }: Props) => {
     }, 500);
   }, [ scrollRef ]);
 
-  if (!data || !token) {
+  if (!data || !token || !isMounted) {
     return null;
   }