fix: add lazy loading and performance improvements

FuelLabs · Sep 27, 2024 · 81a34eb · 81a34eb
1 parent 67e4f78
commit 81a34eb
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 64 deletions.
diff --git a/packages/app-explorer/src/systems/Core/components/Layout/Layout.tsx b/packages/app-explorer/src/systems/Core/components/Layout/Layout.tsx
@@ -1,8 +1,10 @@
 'use client';
 
-import { Container, VStack } from '@fuels/ui';
+import { Container, LoadingBox, VStack } from '@fuels/ui';
 import { usePathname } from 'next/navigation';
-import { Hero } from '~/systems/Home/components/Hero/Hero';
+const Hero = React.lazy(() => import('~/systems/Home/components/Hero/Hero'));
+import { DateTime } from 'fuels';
+import React, { Suspense } from 'react';
 import { cx } from '../../utils/cx';
 import { Footer } from '../Footer/Footer';
 import { TopNav } from '../TopNav/TopNav';
@@ -15,11 +17,15 @@ export type LayoutProps = {
 export function Layout({ children, contentClassName }: LayoutProps) {
   const pathname = usePathname();
   const isHomePage = pathname === '/';
-
+  console.log('Page loaded', DateTime.now);
   return (
     <VStack className="min-w-screen min-h-screen" gap="0">
       <TopNav />
-      {isHomePage && <Hero />}
+      {isHomePage && (
+        <Suspense fallback={<LoadingBox className="w-full h-[12rem]" />}>
+          <Hero />
+        </Suspense>
+      )}
       <Container
         size="4"
         className={cx(

diff --git a/packages/app-explorer/src/systems/Home/components/DataTable/index.tsx b/packages/app-explorer/src/systems/Home/components/DataTable/index.tsx
@@ -31,3 +31,4 @@ export const DataTable = (props: DataTableProps) => {
     </RoundedContainer>
   );
 };
+export default DataTable;
diff --git a/packages/app-explorer/src/systems/Home/components/GasSpentChart/index.tsx b/packages/app-explorer/src/systems/Home/components/GasSpentChart/index.tsx
@@ -20,7 +20,7 @@ const chartConfig = {
 interface GasSpentProps {
   blocks: any;
 }
-export const GasSpentChart = (gasSpent: GasSpentProps) => {
+const GasSpentChart = (gasSpent: GasSpentProps) => {
   const totalGasSpent = gasSpent.blocks
     .map((block: any) => +block.value)
     .reduce((acc: any, value: any) => acc + value, 0);
@@ -141,3 +141,4 @@ export const GasSpentChart = (gasSpent: GasSpentProps) => {
     </RoundedContainer>
   );
 };
+export default GasSpentChart;
diff --git a/packages/app-explorer/src/systems/Home/components/Hero/Hero.tsx b/packages/app-explorer/src/systems/Home/components/Hero/Hero.tsx
@@ -1,22 +1,19 @@
-'use client';
-
 import { Box, Container, Heading, Theme, VStack } from '@fuels/ui';
-
 import { LoadingBox, LoadingWrapper } from '@fuels/ui';
-import { useEffect, useState } from 'react';
+import React, { Suspense, useEffect, useState } from 'react';
 import { tv } from 'tailwind-variants';
 import projectJson from '../../../../../../app-portal/src/systems/Ecosystem/data/projects.json';
-import { DataTable } from '../../components/DataTable';
-import { Block } from '../../interface/blocks.interface';
-import DailyTransaction from '../DailyTransaction';
-import { GasSpentChart } from '../GasSpentChart';
-import { LatestBlock } from '../LatestBlock';
-import { TPS } from '../TPS';
-import TotalDapps from '../TotalDapps/TotalDapps';
 import { getBlocksDashboard } from './actions/get-blocks-dashboard';
 import { getTPS } from './actions/get-tps';
 
-export function Hero() {
+const DailyTransaction = React.lazy(() => import('../DailyTransaction'));
+const GasSpentChart = React.lazy(() => import('../GasSpentChart/index'));
+const LatestBlock = React.lazy(() => import('../LatestBlock'));
+const TPS = React.lazy(() => import('../TPS'));
+const TotalDapps = React.lazy(() => import('../TotalDapps/TotalDapps'));
+const DataTable = React.lazy(() => import('../../components/DataTable'));
+
+function Hero() {
   const classes = styles();
   const [isLoading, setIsLoading] = useState(true);
   const [tpsData, setTpsData] = useState<any>(null);
@@ -25,25 +22,27 @@ export function Hero() {
 
   const getTPSData = async () => {
     try {
-      const result = await getTPS();
-      const dashboard = await getBlocksDashboard();
+      const [result, dashboard] = await Promise.all([
+        getTPS(),
+        getBlocksDashboard(),
+      ]);
+      setIsLoading(false);
 
       setTpsData(result);
-
       setBlocksData(dashboard);
 
       if (isFirstFetch) {
-        setIsLoading(false); // Set loading to false only after first fetch
-        setIsFirstFetch(false); // Mark that the first fetch is done
+        setIsLoading(false);
+        setIsFirstFetch(false);
       }
     } catch (_e) {}
   };
 
   useEffect(() => {
+    getTPSData();
     const interval = setInterval(() => {
       getTPSData();
     }, 10000);
-
     return () => clearInterval(interval);
   }, []);
 
@@ -93,31 +92,35 @@ export function Hero() {
             <Heading as="h1" className={classes.title()}>
               Fuel Explorer
             </Heading>
-            {/* <Heading size="6" className={classes.title()}>
-              Trending Items
-            </Heading>
-            <div className="pb-6">
-              <TrendingCardCarousel />
-            </div> */}
 
             <Box className={classes.searchWrapper()}>
               <div className="row-span-2 col-span-6 sm:col-span-4">
                 <LoadingWrapper
                   isLoading={isLoading}
                   loadingEl={<LoadingBox className="w-full h-[12rem]" />}
-                  regularEl={<DailyTransaction blocks={dailyTsxData} />}
+                  regularEl={
+                    <Suspense
+                      fallback={<LoadingBox className="w-full h-[12rem]" />}
+                    >
+                      <DailyTransaction blocks={dailyTsxData} />
+                    </Suspense>
+                  }
                 />
               </div>
               <div className="row-span-2 col-span-6 sm:col-span-3">
                 <LoadingWrapper
                   isLoading={isLoading}
                   loadingEl={<LoadingBox className="w-full h-[12rem]" />}
                   regularEl={
-                    <TotalDapps
-                      active={activeProjects}
-                      total={totalProjects}
-                      featured={top3Projects}
-                    />
+                    <Suspense
+                      fallback={<LoadingBox className="w-full h-[12rem]" />}
+                    >
+                      <TotalDapps
+                        active={activeProjects}
+                        total={totalProjects}
+                        featured={top3Projects}
+                      />
+                    </Suspense>
                   }
                 />
               </div>
@@ -126,50 +129,69 @@ export function Hero() {
                   isLoading={isLoading}
                   loadingEl={<LoadingBox className="w-full h-[12rem]" />}
                   regularEl={
-                    <LatestBlock
-                      blockNo={
-                        blocksData?.getBlocksDashboard.nodes[0].blockNo
-                          ? blocksData.getBlocksDashboard.nodes[0].blockNo
-                              .toString()
-                              .replace(/\B(?=(\d{3})+(?!\d))/g, ',')
-                          : ''
-                      }
-                      gasUsed={
-                        blocksData?.getBlocksDashboard.nodes[0].gasUsed ?? ''
-                      }
-                      producer={
-                        blocksData?.getBlocksDashboard.nodes[0].producer ?? ''
-                      }
-                      timeStamp={
-                        blocksData?.getBlocksDashboard.nodes[0].timestamp ?? ''
-                      }
-                      // tps={tpsData?.nodes[0].tps ?? ''}
-                    />
+                    <Suspense
+                      fallback={<LoadingBox className="w-full h-[12rem]" />}
+                    >
+                      <LatestBlock
+                        blockNo={
+                          blocksData?.getBlocksDashboard.nodes[0].blockNo
+                            ? blocksData.getBlocksDashboard.nodes[0].blockNo
+                                .toString()
+                                .replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+                            : ''
+                        }
+                        gasUsed={
+                          blocksData?.getBlocksDashboard.nodes[0].gasUsed ?? ''
+                        }
+                        producer={
+                          blocksData?.getBlocksDashboard.nodes[0].producer ?? ''
+                        }
+                        timeStamp={
+                          blocksData?.getBlocksDashboard.nodes[0].timestamp ??
+                          ''
+                        }
+                      />
+                    </Suspense>
                   }
                 />
               </div>
-              <div className={`${'col-span-6 row-span-3 sm:col-span-5'} `}>
+              <div className="col-span-6 row-span-3 sm:col-span-5">
                 <LoadingWrapper
                   isLoading={isLoading}
                   loadingEl={<LoadingBox className="w-full h-full" />}
-                  regularEl={<DataTable blocks={blocks.slice(0, 5)} />}
+                  regularEl={
+                    <Suspense
+                      fallback={<LoadingBox className="w-full h-full" />}
+                    >
+                      <DataTable blocks={blocks.slice(0, 5)} />
+                    </Suspense>
+                  }
                 />
               </div>
 
               <div className="row-span-2 col-span-6 sm:col-span-4">
                 <LoadingWrapper
                   isLoading={isLoading}
                   loadingEl={<LoadingBox className="w-full h-[12rem]" />}
-                  regularEl={<TPS blocks={tpsTsxData} />}
+                  regularEl={
+                    <Suspense
+                      fallback={<LoadingBox className="w-full h-[12rem]" />}
+                    >
+                      <TPS blocks={tpsTsxData} />
+                    </Suspense>
+                  }
                 />
-                {/* <TPSChart /> */}
               </div>
               <div className="row-span-2 col-span-6 sm:col-span-3">
-                <LoadingWrapper
-                  isLoading={isLoading}
-                  loadingEl={<LoadingBox className="w-full h-[12rem]" />}
-                  regularEl={<GasSpentChart blocks={dailyTsxData} />}
-                />
+                <Suspense
+                  fallback={<LoadingBox className="w-full h-[12rem]" />}
+                >
+                  <LoadingWrapper
+                    isLoading={isLoading}
+                    loadingEl={<LoadingBox className="w-full h-[12rem]" />}
+                    regularEl={<GasSpentChart blocks={dailyTsxData} />}
+                  />
+                </Suspense>
               </div>
             </Box>
           </VStack>
@@ -203,3 +225,4 @@ const styles = tv({
     ],
   },
 });
+export default Hero;
diff --git a/packages/app-explorer/src/systems/Home/components/LatestBlock.tsx b/packages/app-explorer/src/systems/Home/components/LatestBlock.tsx
@@ -3,7 +3,7 @@ import { HStack, RoundedContainer, VStack } from '@fuels/ui';
 import { fromNow } from '~/systems/Core/utils/dayjs';
 import { Block } from '../interface/blocks.interface';
 
-export const LatestBlock = (block: Block) => {
+const LatestBlock = (block: Block) => {
   return (
     <RoundedContainer className="py-4 px-5 space-y-[24px] h-full bg-light-gradient dark:bg-dark-gradient">
       <div className="space-y-[16px]">
@@ -61,3 +61,4 @@ export const LatestBlock = (block: Block) => {
     </RoundedContainer>
   );
 };
+export default LatestBlock;
diff --git a/packages/app-explorer/src/systems/Home/components/TPS.tsx b/packages/app-explorer/src/systems/Home/components/TPS.tsx
@@ -148,3 +148,4 @@ export const TPS = (props: TPSProps) => {
     </RoundedContainer>
   );
 };
+export default TPS;
-Original file line number
+Diff line change
@@ Expand Up / @@ -31,3 +31,4 @@ export const DataTable = (props: DataTableProps) => { @@
         </RoundedContainer>
       );
     };
+    export default DataTable;