Merge pull request #13121 from ethereum/performance-lazy-load-code-modal

performance: lazy load Codeblock component

Author: pettinarip

src/components/Codeblock.tsx

@@ -10,12 +10,12 @@ import { Box, BoxProps, Flex, useColorModeValue } from "@chakra-ui/react"
 
 import CopyToClipboard from "@/components/CopyToClipboard"
 import Emoji from "@/components/Emoji"
+
 // https://github.com/FormidableLabs/prism-react-renderer/tree/master#custom-language-support
+import { LINES_BEFORE_COLLAPSABLE } from "@/lib/constants"
 ;(typeof global !== "undefined" ? global : window).Prism = Prism
 require("prismjs/components/prism-solidity")
 
-const LINES_BEFORE_COLLAPSABLE = 8
-
 const TopBarItem = (props: BoxProps) => {
   const bgColor = useColorModeValue("#f7f7f7", "#363641")
 

src/components/TitleCardList.tsx

@@ -11,21 +11,12 @@ import {
 } from "@chakra-ui/react"
 
 import { TranslationKey } from "@/lib/types"
+import { ITitleCardItem } from "@/lib/interfaces"
 
 import { Image } from "@/components/Image"
 import { BaseLink } from "@/components/Link"
 import Translation from "@/components/Translation"
 
-export interface ITitleCardItem {
-  title: string
-  description: string
-  caption?: string
-  link?: string
-  image?: string
-  alt?: string
-  id?: number
-}
-
 export type TitleCardListProps = {
   content: Array<ITitleCardItem>
   className?: string

src/lib/constants.ts

@@ -149,3 +149,6 @@ export const DEFAULT_GLOSSARY_NS = "glossary"
 export const HAMBURGER_BUTTON_ID = "mobile-menu-button"
 export const MOBILE_LANGUAGE_BUTTON_NAME = "mobile-language-button"
 export const DESKTOP_LANGUAGE_BUTTON_NAME = "desktop-language-button"
+
+// Codeblock
+export const LINES_BEFORE_COLLAPSABLE = 8

src/lib/interfaces.ts

@@ -163,3 +163,26 @@ export interface IGetInvolvedCard {
   title: string
   description: string
 }
+
+/**
+ * TitleCardList
+ */
+
+export interface ITitleCardItem {
+  title: string
+  description: string
+  caption?: string
+  link?: string
+  image?: string
+  alt?: string
+  id?: number
+}
+
+/**
+ * Codeblock
+ */
+
+export interface CodeExample extends ITitleCardItem {
+  codeLanguage: string
+  code: string
+}

src/pages/index.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useState } from "react"
+import { lazy, ReactNode, Suspense, useState } from "react"
 import type { GetStaticProps, InferGetStaticPropsType } from "next"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
@@ -14,25 +14,25 @@ import {
   HeadingProps,
   Icon,
   SimpleGridProps,
+  SkeletonText,
   Stack,
   useToken,
 } from "@chakra-ui/react"
 
 import { AllMetricData, BasePageProps, ChildOnlyProp, Lang } from "@/lib/types"
-import type { CommunityEventsReturnType } from "@/lib/interfaces"
+import type { CodeExample, CommunityEventsReturnType } from "@/lib/interfaces"
 
 import ActionCard from "@/components/ActionCard"
 import ButtonLink from "@/components/Buttons/ButtonLink"
 import CalloutBanner from "@/components/CalloutBanner"
-import Codeblock from "@/components/Codeblock"
 import CodeModal from "@/components/CodeModal"
 import CommunityEvents from "@/components/CommunityEvents"
 import HomeHero from "@/components/Hero/HomeHero"
 import { Image } from "@/components/Image"
 import MainArticle from "@/components/MainArticle"
 import PageMetadata from "@/components/PageMetadata"
 import StatsBoxGrid from "@/components/StatsBoxGrid"
-import TitleCardList, { ITitleCardItem } from "@/components/TitleCardList"
+import TitleCardList from "@/components/TitleCardList"
 import Translation from "@/components/Translation"
 
 import { existsNamespace } from "@/lib/utils/existsNamespace"
@@ -225,6 +225,27 @@ 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,
@@ -295,11 +316,6 @@ const HomePage = ({
     },
   ]
 
-  interface CodeExample extends ITitleCardItem {
-    codeLanguage: string
-    code: string
-  }
-
   const codeExamples: Array<CodeExample> = [
     {
       title: t("page-index:page-index-developers-code-example-title-0"),
@@ -538,19 +554,24 @@ const HomePage = ({
               </ButtonLink>
             </ButtonLinkRow>
           </FeatureContent>
-          <CodeModal
-            isOpen={isModalOpen}
-            setIsOpen={setModalOpen}
-            title={codeExamples[activeCode].title}
-          >
-            <Codeblock
-              codeLanguage={codeExamples[activeCode].codeLanguage}
-              allowCollapse={false}
-              fromHomepage
+          {/* Render CodeModal & Codeblock conditionally */}
+          {isModalOpen && (
+            <CodeModal
+              isOpen={isModalOpen}
+              setIsOpen={setModalOpen}
+              title={codeExamples[activeCode].title}
             >
-              {codeExamples[activeCode].code}
-            </Codeblock>
-          </CodeModal>
+              <Suspense fallback={<CodeblockSkeleton />}>
+                <Codeblock
+                  codeLanguage={codeExamples[activeCode].codeLanguage}
+                  allowCollapse={false}
+                  fromHomepage
+                >
+                  {codeExamples[activeCode].code}
+                </Codeblock>
+              </Suspense>
+            </CodeModal>
+          )}
         </Row>
       </MainSectionContainer>
       {/* Eth Today Section */}