perf: lazy-load layer-2 networks table

app/[locale]/layer-2/networks/page.tsx

@@ -1,14 +1,19 @@
-import { Suspense } from "react"
 import { pick } from "lodash"
 import {
   getMessages,
   getTranslations,
   setRequestLocale,
 } from "next-intl/server"
 
-import type { Lang, PageParams } from "@/lib/types"
+import type { ExtendedRollup, Lang, PageParams } from "@/lib/types"
 
+import CalloutSSR from "@/components/CalloutSSR"
+import { ContentHero, type ContentHeroProps } from "@/components/Hero"
 import I18nProvider from "@/components/I18nProvider"
+import Layer2NetworksTable from "@/components/Layer2NetworksTable/lazy"
+import MainArticle from "@/components/MainArticle"
+import NetworkMaturity from "@/components/NetworkMaturity"
+import { ButtonLink } from "@/components/ui/buttons/Button"
 
 import { getAppPageContributorInfo } from "@/lib/utils/contributors"
 import { getMetadata } from "@/lib/utils/metadata"
@@ -18,7 +23,6 @@ import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
 import { ethereumNetworkData, layer2Data } from "@/data/networks/networks"
 import { walletsData } from "@/data/wallets/wallet-data"
 
-import Layer2Networks from "./_components/networks"
 import Layer2NetworksPageJsonLD from "./page-jsonld"
 
 import {
@@ -28,6 +32,9 @@ import {
   getGrowThePieMasterData,
   getL2beatData,
 } from "@/lib/data"
+import heroImg from "@/public/images/heroes/layer-2-hub-hero.png"
+import Callout2Image from "@/public/images/layer-2/layer-2-walking.png"
+import Callout1Image from "@/public/images/man-and-dog-playing.png"
 
 const Page = async (props: { params: Promise<PageParams> }) => {
   const params = await props.params
@@ -129,24 +136,103 @@ const Page = async (props: { params: Promise<PageParams> }) => {
           wallet.supported_chains.includes("Ethereum Mainnet")
         )
         .map((wallet) => wallet.name),
-    },
+    } as ExtendedRollup,
   }
 
   const { contributors } = await getAppPageContributorInfo(
     "layer-2/networks",
     locale as Lang
   )
 
+  const t = await getTranslations("page-layer-2-networks")
+  const tCommon = await getTranslations("common")
+
+  const heroProps: ContentHeroProps = {
+    breadcrumbs: { slug: "/layer-2/networks", startDepth: 1 },
+    heroImg,
+    title: tCommon("nav-networks-explore-networks-label"),
+    description: t("page-layer-2-networks-hero-description"),
+  }
+
   return (
     <I18nProvider locale={locale} messages={messages}>
       <Layer2NetworksPageJsonLD
         locale={locale}
         layer2Data={layer2DataCompiled}
         contributors={contributors}
       />
-      <Suspense>
-        <Layer2Networks {...layer2NetworksProps} />
-      </Suspense>
+      <MainArticle className="relative flex flex-col">
+        <ContentHero {...heroProps} />
+
+        <Layer2NetworksTable {...layer2NetworksProps} />
+
+        <div id="more-advanced-cta" className="w-full px-8 py-9">
+          <div className="flex flex-col gap-8 bg-main-gradient px-12 py-14">
+            <h3>{t("page-layer-2-networks-more-advanced-title")}</h3>
+            <div className="flex max-w-[768px] flex-col gap-8">
+              <p>
+                {t("page-layer-2-networks-more-advanced-descripton-1")}{" "}
+                <strong>
+                  {t("page-layer-2-networks-more-advanced-descripton-2")}
+                </strong>
+              </p>
+              <p>{t("page-layer-2-networks-more-advanced-descripton-3")}</p>
+            </div>
+            <div className="flex flex-col gap-6 sm:flex-row">
+              <ButtonLink href="https://l2beat.com">
+                {t("page-layer-2-networks-more-advanced-link-1")}
+              </ButtonLink>
+              <ButtonLink href="https://growthepie.com">
+                {t("page-layer-2-networks-more-advanced-link-2")}
+              </ButtonLink>
+            </div>
+          </div>
+        </div>
+
+        <NetworkMaturity />
+
+        <div
+          id="callout-cards"
+          className="flex w-full flex-col px-8 py-9 lg:flex-row lg:gap-16"
+        >
+          <CalloutSSR
+            image={Callout1Image}
+            title={t("page-layer-2-networks-callout-1-title")}
+            description={t("page-layer-2-networks-callout-1-description")}
+          >
+            <div>
+              <ButtonLink
+                href="/layer-2/"
+                customEventOptions={{
+                  eventCategory: "l2_networks",
+                  eventAction: "button_click",
+                  eventName: "bottom_hub",
+                }}
+              >
+                {tCommon("learn-more")}
+              </ButtonLink>
+            </div>
+          </CalloutSSR>
+          <CalloutSSR
+            image={Callout2Image}
+            title={t("page-layer-2-networks-callout-2-title")}
+            description={t("page-layer-2-networks-callout-2-description")}
+          >
+            <div>
+              <ButtonLink
+                href="/layer-2/learn/"
+                customEventOptions={{
+                  eventCategory: "l2_networks",
+                  eventAction: "button_click",
+                  eventName: "bottom_learn",
+                }}
+              >
+                {tCommon("learn-more")}
+              </ButtonLink>
+            </div>
+          </CalloutSSR>
+        </div>
+      </MainArticle>
     </I18nProvider>
   )
 }

src/components/Layer2NetworksTable/hooks/useNetworkColumns.tsx

@@ -79,17 +79,12 @@ export const useNetworkColumns: ColumnDef<ExtendedRollup & { id: string }>[] = [
                   <Translation id="page-layer-2-networks:page-layer-2-networks-avg-transaction-fee" />
                 </p>
                 <p>
-                  {row.original.txCosts ? (
-                    <>
-                      $
-                      {numberFormat(meta.locale as Lang, {
+                  {row.original.txCosts
+                    ? `$${numberFormat(meta.locale as Lang, {
                         minimumFractionDigits: 2,
                         maximumFractionDigits: 3,
-                      }).format(row.original.txCosts || 0)}
-                    </>
-                  ) : (
-                    <p>-</p>
-                  )}
+                      }).format(row.original.txCosts || 0)}`
+                    : "-"}
                 </p>
               </div>
               <div>

src/components/Layer2NetworksTable/lazy.tsx

@@ -0,0 +1,7 @@
+"use client"
+
+import dynamic from "next/dynamic"
+
+import Loading from "./loading"
+
+export default dynamic(() => import("."), { ssr: false, loading: Loading })

src/components/Layer2NetworksTable/loading.tsx

@@ -0,0 +1,55 @@
+import { Skeleton } from "../ui/skeleton"
+
+const NetworkRow = ({ idx }: { idx: number }) => (
+  <div
+    key={"network" + idx}
+    className="flex w-full items-center gap-4 border-b p-4"
+  >
+    <Skeleton className="size-10 rounded-full" />
+    <Skeleton className="h-6 w-40" />
+    <div className="ms-auto hidden gap-6 lg:flex">
+      <Skeleton className="h-6 w-20" />
+      <Skeleton className="h-6 w-20" />
+      <Skeleton className="h-6 w-28" />
+      <Skeleton className="size-6" />
+    </div>
+    <Skeleton className="ms-auto size-6 lg:hidden" />
+  </div>
+)
+
+const Loading = () => (
+  <div className="px-4">
+    <div className="flex flex-col gap-4 pb-6 pt-4 lg:flex-row lg:gap-6 2xl:px-0">
+      <div className="hidden w-80 flex-col gap-2 lg:flex">
+        <div className="flex items-center justify-between border-b px-2 py-1.5">
+          <Skeleton className="h-5 w-24" />
+          <Skeleton className="h-5 w-24" />
+        </div>
+        {Array.from({ length: 2 }).map((_, setIdx) => (
+          <div key={"set" + setIdx} className="flex flex-col border px-6 py-2">
+            {Array.from({ length: 4 }).map((_, idx) => (
+              <div
+                key={"set" + setIdx + "option" + idx}
+                className="flex items-center gap-2 border-b px-2 py-4 last:border-none"
+              >
+                <Skeleton className="aspect-square size-4" />
+                <Skeleton className="h-5 w-1/2" />
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+      <div className="flex flex-1 flex-col">
+        <div className="flex items-center justify-between border-b px-4 py-2">
+          <Skeleton className="h-5 w-24 lg:hidden" />
+          <Skeleton className="h-5 w-40" />
+        </div>
+        {Array.from({ length: 6 }).map((_, idx) => (
+          <NetworkRow key={"network" + idx} idx={idx} />
+        ))}
+      </div>
+    </div>
+  </div>
+)
+
+export default Loading

src/lib/types.ts

@@ -781,7 +781,7 @@ export type ExtendedRollup = Rollup & {
   walletsSupported: string[]
   activeAddresses: number | undefined
   launchDate: string | null
-  walletsSupportedCount: number
+  walletsSupportedCount: string
   blockspaceData: {
     nft: number
     defi: number

src/lib/utils/networkMaturity.ts

@@ -1,3 +1,5 @@
+import type { MaturityLevel } from "@/lib/types"
+
 const getMaturityPoints = (l2beatData) => {
   if (!l2beatData?.risks) return 0
 
@@ -49,7 +51,7 @@ const getMaturityPoints = (l2beatData) => {
   return maturityPoints
 }
 
-export const networkMaturity = (l2beatData) => {
+export const networkMaturity = (l2beatData): MaturityLevel => {
   if (!l2beatData) return "emerging"
 
   const maturityPoints = getMaturityPoints(l2beatData)