Merge pull request #13298 from ethereum/performance/home-stats-intersection-obs

Performance: lazy load stats using intersection obs

Author: corwintines

src/components/LazyLoadComponent.tsx

@@ -0,0 +1,53 @@
+import React, { Suspense, useEffect, useRef, useState } from "react"
+
+interface LazyLoadComponentProps<T extends React.ElementType> {
+  component: T
+  fallback: React.ReactNode
+  componentProps: React.ComponentProps<T>
+  intersectionOptions?: IntersectionObserverInit
+}
+
+const LazyLoadComponent = <T extends React.ElementType>({
+  component: Component,
+  fallback,
+  componentProps,
+  intersectionOptions = {},
+}: LazyLoadComponentProps<T>) => {
+  const [isVisible, setIsVisible] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(([entry]) => {
+      // Update the state when observer callback fires
+      if (entry.isIntersecting) {
+        setIsVisible(true)
+        observer.disconnect()
+      }
+    }, intersectionOptions)
+
+    if (ref.current) {
+      observer.observe(ref.current)
+    }
+
+    // Clean up the observer on component unmount
+    return () => {
+      if (ref.current) {
+        observer.disconnect()
+      }
+    }
+  }, [])
+
+  return (
+    <div ref={ref}>
+      {isVisible ? (
+        <Suspense fallback={fallback}>
+          <Component {...componentProps} />
+        </Suspense>
+      ) : (
+        fallback // Show fallback until the component is visible
+      )}
+    </div>
+  )
+}
+
+export default LazyLoadComponent

src/pages/index.tsx

@@ -29,9 +29,9 @@ import CodeModal from "@/components/CodeModal"
 import CommunityEvents from "@/components/CommunityEvents"
 import HomeHero from "@/components/Hero/HomeHero"
 import { Image } from "@/components/Image"
+import LazyLoadComponent from "@/components/LazyLoadComponent"
 import MainArticle from "@/components/MainArticle"
 import PageMetadata from "@/components/PageMetadata"
-import StatsBoxGrid from "@/components/StatsBoxGrid"
 import TitleCardList from "@/components/TitleCardList"
 import Translation from "@/components/Translation"
 
@@ -70,6 +70,29 @@ import merge from "@/public/images/upgrades/merge.png"
 import robotfixed from "@/public/images/wallet-cropped.png"
 import ethereum from "@/public/images/what-is-ethereum.png"
 
+// lazy loaded components
+const Codeblock = lazy(() =>
+  Promise.all([
+    import("@/components/Codeblock"),
+    // Add a delay to prevent the skeleton from flashing
+    new Promise((resolve) => setTimeout(resolve, 1000)),
+  ]).then(([module]) => module)
+)
+const StatsBoxGrid = lazy(() => import("@/components/StatsBoxGrid"))
+
+const Skeleton = () => (
+  <Stack px={6} pt="2.75rem" h="50vh">
+    <SkeletonText
+      mt="4"
+      noOfLines={6}
+      spacing={4}
+      skeletonHeight="1.4rem"
+      startColor="body.medium"
+      opacity={0.2}
+    />
+  </Stack>
+)
+
 const SectionHeading = (props: HeadingProps) => (
   <Heading
     lineHeight={1.4}
@@ -225,27 +248,6 @@ export const getStaticProps = (async ({ locale }) => {
   }
 }) satisfies GetStaticProps<Props>
 
-const CodeblockSkeleton = () => (
-  <Stack px={6} pt="2.75rem" h="50vh">
-    <SkeletonText
-      mt="4"
-      noOfLines={6}
-      spacing={4}
-      skeletonHeight="1.4rem"
-      startColor="body.medium"
-      opacity={0.2}
-    />
-  </Stack>
-)
-
-const Codeblock = lazy(() =>
-  Promise.all([
-    import("@/components/Codeblock"),
-    // Add a delay to prevent the skeleton from flashing
-    new Promise((resolve) => setTimeout(resolve, 1000)),
-  ]).then(([module]) => module)
-)
-
 const HomePage = ({
   communityEvents,
   metricResults,
@@ -561,7 +563,7 @@ const HomePage = ({
               setIsOpen={setModalOpen}
               title={codeExamples[activeCode].title}
             >
-              <Suspense fallback={<CodeblockSkeleton />}>
+              <Suspense fallback={<Skeleton />}>
                 <Codeblock
                   codeLanguage={codeExamples[activeCode].codeLanguage}
                   allowCollapse={false}
@@ -584,7 +586,17 @@ const HomePage = ({
             <Translation id="page-index:page-index-network-stats-subtitle" />
           </SectionDecription>
         </ContentBox>
-        <StatsBoxGrid data={metricResults} />
+
+        <LazyLoadComponent
+          component={StatsBoxGrid}
+          fallback={<Skeleton />}
+          componentProps={{ data: metricResults }}
+          intersectionOptions={{
+            root: null,
+            rootMargin: "500px",
+            threshold: 0,
+          }}
+        />
       </GrayContainer>
       <Divider mb={16} mt={16} w="10%" height="0.25rem" bgColor="homeDivider" />
       <CommunityEvents events={communityEvents} />