Merge pull request #15750 from ethereum/lazy-find-wallets

feat: migrate /wallets/find-wallet to ssr, add loaders

Author: corwintines

app/[locale]/wallets/find-wallet/_components/find-wallet.tsx

@@ -7,7 +7,10 @@ import {
 
 import { Lang } from "@/lib/types"
 
+import Breadcrumbs from "@/components/Breadcrumbs"
+import FindWalletProductTable from "@/components/FindWalletProductTable/lazy"
 import I18nProvider from "@/components/I18nProvider"
+import MainArticle from "@/components/MainArticle"
 
 import { getMetadata } from "@/lib/utils/metadata"
 import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
@@ -17,10 +20,12 @@ import {
   getSupportedLocaleWallets,
 } from "@/lib/utils/wallets"
 
-import FindWalletPage from "./_components/find-wallet"
-
 const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
   const { locale } = await params
+  const t = await getTranslations({
+    locale,
+    namespace: "page-wallets-find-wallet",
+  })
 
   setRequestLocale(locale)
 
@@ -45,7 +50,19 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
 
   return (
     <I18nProvider locale={locale} messages={messages}>
-      <FindWalletPage wallets={wallets} />
+      <MainArticle className="relative flex flex-col">
+        <div className="flex w-full flex-col gap-8 px-4 pb-4 pt-11 md:w-1/2">
+          <Breadcrumbs slug="wallets/find-wallet" />
+          <h1 className="text-[2.5rem] leading-[1.4] md:text-5xl">
+            {t("page-find-wallet-title")}
+          </h1>
+          <p className="mb-6 text-xl leading-[1.4] text-body-medium last:mb-8">
+            {t("page-find-wallet-description")}
+          </p>
+        </div>
+
+        <FindWalletProductTable wallets={wallets} />
+      </MainArticle>
     </I18nProvider>
   )
 }

app/[locale]/wallets/find-wallet/page.tsx

@@ -1,4 +1,6 @@
-import { useEffect, useMemo, useState } from "react"
+"use client"
+
+import { useMemo, useState } from "react"
 
 import {
   ChainName,
@@ -22,15 +24,11 @@ import WalletSubComponent from "./WalletSubComponent"
 import { useTranslation } from "@/hooks/useTranslation"
 
 const FindWalletProductTable = ({ wallets }: { wallets: Wallet[] }) => {
+  console.log({ wallets })
   const { t } = useTranslation("page-wallets-find-wallet")
   const walletPersonas = useWalletPersonaPresets()
   const walletFilterOptions = useWalletFilters()
   const [filters, setFilters] = useState<FilterOption[]>(walletFilterOptions)
-  const [isClient, setIsClient] = useState(false)
-
-  useEffect(() => {
-    setIsClient(true)
-  }, [])
 
   const activeFilterKeys = useMemo(() => {
     const keys: string[] = []
@@ -101,10 +99,6 @@ const FindWalletProductTable = ({ wallets }: { wallets: Wallet[] }) => {
     })
   }
 
-  if (!isClient) {
-    return null
-  }
-
   if (!Array.isArray(wallets)) {
     return <div>Error loading wallets</div>
   }

src/components/FindWalletProductTable/index.tsx

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

src/components/FindWalletProductTable/lazy.tsx

@@ -0,0 +1,87 @@
+import { Skeleton, SkeletonLines } from "../ui/skeleton"
+
+const WalletSkeleton = () => (
+  <>
+    {Array.from({ length: 3 }).map((_, idx) => (
+      <div key={"wallet" + idx} className="flex w-full gap-4 border-b p-4">
+        <Skeleton className="size-16" />
+
+        <div className="flex flex-1 flex-col gap-2">
+          <Skeleton className="h-7 w-full max-w-32" />
+          <div className="flex gap-1">
+            <Skeleton className="h-5 w-20 rounded-full" />
+            <Skeleton className="h-5 w-20 rounded-full" />
+            <Skeleton className="h-5 w-20 rounded-full" />
+          </div>
+          <SkeletonLines noOfLines={4} className="pt-4" />
+          <div className="h-12 max-w-28 rounded border px-2 py-1.5">
+            <Skeleton className="h-full" />
+          </div>
+        </div>
+        <div className="flex items-center">
+          <Skeleton className="size-6" />
+        </div>
+      </div>
+    ))}
+  </>
+)
+
+const Loading = () => (
+  <div className="flex flex-col gap-16 px-4 lg:gap-20">
+    <div className="flex max-w-full gap-4 overflow-x-scroll lg:grid lg:grid-cols-5">
+      {Array.from({ length: 5 }).map((_, idx) => (
+        <Skeleton
+          key={"personas" + idx}
+          className="h-40 min-w-48 rounded-2xl shadow-svg-button-link xl:h-32"
+        />
+      ))}
+    </div>
+    <div className="flex flex-[3] flex-col gap-2 lg:hidden">
+      <div className="flex max-w-40 gap-2">
+        <div className="flex flex-1 flex-col gap-1">
+          <Skeleton className="w-full max-w-32" />
+          <Skeleton className="w-full max-w-24" />
+        </div>
+        <Skeleton className="size-8" />
+      </div>
+      <WalletSkeleton />
+    </div>
+    <div className="flex gap-6 max-lg:hidden">
+      <div className="flex max-w-80 flex-1 flex-col gap-2">
+        <div className="flex h-10 items-center justify-between px-6 py-1.5">
+          <Skeleton className="w-1/3" />
+          <div className="flex w-1/3 gap-1">
+            <Skeleton className="aspect-square" />
+            <Skeleton className="w-full" />
+          </div>
+        </div>
+        {Array.from({ length: 3 }).map((_, setIdx) => (
+          <div
+            key={"set" + setIdx}
+            className="flex w-full flex-col border px-6 py-2"
+          >
+            {Array.from({ length: 4 }).map((_, idx) => (
+              <div
+                key={"set" + setIdx + "option" + idx}
+                className="flex gap-2 border-b px-2 py-6 last:border-none"
+              >
+                <Skeleton className="aspect-square" />
+                <Skeleton className="w-1/3" />
+                <Skeleton className="ms-auto aspect-[2]" />
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+      <div className="flex flex-1 flex-col gap-2">
+        <div className="flex gap-2">
+          <Skeleton className="w-full max-w-32" />
+          <Skeleton className="w-8" />
+        </div>
+        <WalletSkeleton />
+      </div>
+    </div>
+  </div>
+)
+
+export default Loading