skeleton for tx details

pages/tx/[hash].tsx

 import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
 import Head from 'next/head';
 import type { RoutedQuery } from 'nextjs-routes';
 import React from 'react';
 
 import getSeo from 'lib/next/tx/getSeo';
-import Transaction from 'ui/pages/Transaction';
+import Page from 'ui/shared/Page/Page';
+
+const Transaction = dynamic(() => import('ui/pages/Transaction'), { ssr: false });
 
 const TransactionPage: NextPage<RoutedQuery<'/tx/[hash]'>> = ({ hash }: RoutedQuery<'/tx/[hash]'>) => {
   const { title, description } = getSeo({ hash });
@@ -15,7 +18,9 @@ const TransactionPage: NextPage<RoutedQuery<'/tx/[hash]'>> = ({ hash }: RoutedQu
         <title>{ title }</title>
         <meta name="description" content={ description }/>
       </Head>
-      <Transaction/>
+      <Page>
+        <Transaction/>
+      </Page>
     </>
   );
 };

ui/pages/Transaction.tsx

@@ -8,9 +8,9 @@ import useApiQuery from 'lib/api/useApiQuery';
 import { useAppContext } from 'lib/appContext';
 import networkExplorers from 'lib/networks/networkExplorers';
 import getQueryParamString from 'lib/router/getQueryParamString';
+import { TX } from 'stubs/tx';
 import TextAd from 'ui/shared/ad/TextAd';
 import LinkExternal from 'ui/shared/LinkExternal';
-import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import RoutedTabs from 'ui/shared/RoutedTabs/RoutedTabs';
 import TxDetails from 'ui/tx/TxDetails';
@@ -38,7 +38,10 @@ const TransactionPageContent = () => {
 
   const { data } = useApiQuery('tx', {
     pathParams: { hash },
-    queryOptions: { enabled: Boolean(hash) },
+    queryOptions: {
+      enabled: Boolean(hash),
+      placeholderData: TX,
+    },
   });
 
   const explorersLinks = networkExplorers
@@ -66,7 +69,7 @@ const TransactionPageContent = () => {
   );
 
   return (
-    <Page>
+    <>
       <TextAd mb={ 6 }/>
       <PageTitle
         text="Transaction details"
@@ -75,7 +78,7 @@ const TransactionPageContent = () => {
         backLinkLabel="Back to transactions list"
       />
       <RoutedTabs tabs={ TABS }/>
-    </Page>
+    </>
   );
 };
 

ui/tx/details/TxDetailsSkeleton.tsx

-import { Grid, GridItem, Skeleton } from '@chakra-ui/react';
-import React from 'react';
-
-import DetailsSkeletonRow from 'ui/shared/skeletons/DetailsSkeletonRow';
-
-const TxDetailsSkeleton = () => {
-  const sectionGap = (
-    <GridItem
-      colSpan={{ base: undefined, lg: 2 }}
-      mt={{ base: 2, lg: 3 }}
-      mb={{ base: 0, lg: 3 }}
-      borderBottom="1px solid"
-      borderColor="divider"
-    />
-  );
-
-  return (
-    <Grid columnGap={ 8 } rowGap={{ base: 5, lg: 7 }} templateColumns={{ base: '1fr', lg: '210px 1fr' }} maxW="1000px" pt={{ base: 1, lg: 2 }}>
-      <DetailsSkeletonRow/>
-      <DetailsSkeletonRow w="20%"/>
-      <DetailsSkeletonRow w="50%"/>
-      <DetailsSkeletonRow/>
-      <DetailsSkeletonRow w="70%"/>
-      <DetailsSkeletonRow w="70%"/>
-      { sectionGap }
-      <DetailsSkeletonRow w="40%"/>
-      <DetailsSkeletonRow w="40%"/>
-      <DetailsSkeletonRow w="40%"/>
-      <DetailsSkeletonRow w="40%"/>
-      <DetailsSkeletonRow w="40%"/>
-      { sectionGap }
-      <GridItem colSpan={{ base: undefined, lg: 2 }}>
-        <Skeleton h={ 5 } borderRadius="full" w="100px"/>
-      </GridItem>
-    </Grid>
-  );
-};
-
-export default TxDetailsSkeleton;

ui/tx/useFetchTxInfo.tsx

@@ -12,6 +12,7 @@ import delay from 'lib/delay';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
+import { TX } from 'stubs/tx';
 
 interface Params {
   onTxStatusUpdate?: () => void;
@@ -33,6 +34,7 @@ export default function useFetchTxInfo({ onTxStatusUpdate, updateDelay }: Params
     queryOptions: {
       enabled: Boolean(hash),
       refetchOnMount: false,
+      placeholderData: TX,
     },
   });
   const { data, isError, isLoading } = queryResult;