refactor: client, loading, server component breakdown

Author: wackerow

app/[locale]/what-is-ethereum/page.tsx

@@ -8,7 +8,7 @@ import { MdInfoOutline } from "react-icons/md"
 
 import type { ChildOnlyProp, CommitHistory, Lang } from "@/lib/types"
 
-import AdoptionChart from "@/components/AdoptionChart/lazy"
+import AdoptionChart from "@/components/AdoptionChart/server"
 import {
   Banner,
   BannerBody,
@@ -18,12 +18,12 @@ import {
 } from "@/components/BannerGrid"
 import Callout from "@/components/Callout"
 import Card from "@/components/Card"
-import EnergyConsumptionChart from "@/components/EnergyConsumptionChart/lazy"
+import EnergyConsumptionChart from "@/components/EnergyConsumptionChart/server"
 import FeedbackCard from "@/components/FeedbackCard"
 import FileContributors from "@/components/FileContributors"
 import I18nProvider from "@/components/I18nProvider"
 import { Image, ImageProps } from "@/components/Image"
-import ListenToPlayer from "@/components/ListenToPlayer/lazy"
+import ListenToPlayer from "@/components/ListenToPlayer/server"
 import MainArticle from "@/components/MainArticle"
 import { StandaloneQuizWidget } from "@/components/Quiz/QuizWidget"
 import StatErrorMessage from "@/components/StatErrorMessage"

src/components/AdoptionChart/lazy.tsx

@@ -0,0 +1,28 @@
+import { Skeleton } from "@/components/ui/skeleton"
+
+const Loading = () => (
+  <div className="ms-8 grid w-full max-w-96 flex-[2] grid-cols-3 gap-x-4 gap-y-6">
+    <div className="flex h-fit flex-1 flex-col self-end overflow-hidden rounded-4xl border">
+      <Skeleton className="m-4" />
+    </div>
+    <div className="flex h-fit flex-1 flex-col self-end overflow-hidden rounded-4xl border [&>div]:border-b last:[&>div]:border-none">
+      {Array.from({ length: 3 }).map((_, idx) => (
+        <div key={"col2" + idx} className="border-b p-4 last:border-none">
+          <Skeleton />
+        </div>
+      ))}
+    </div>
+    <div className="flex h-fit flex-1 flex-col self-end overflow-hidden rounded-4xl border">
+      {Array.from({ length: 8 }).map((_, idx) => (
+        <div key={"col3" + idx} className="border-b p-4 last:border-none">
+          <Skeleton />
+        </div>
+      ))}
+    </div>
+    <Skeleton className="mx-6" />
+    <Skeleton className="mx-6" />
+    <Skeleton className="mx-6" />
+  </div>
+)
+
+export default Loading

src/components/AdoptionChart/loading.tsx

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

src/components/AdoptionChart/server.tsx

@@ -0,0 +1,44 @@
+import { Skeleton } from "@/components/ui/skeleton"
+
+const Loading = () => (
+  <div className="my-16 w-full space-y-12">
+    <div className="grid w-full grid-cols-5 place-items-end sm:grid-cols-6 md:grid-cols-10">
+      <div className="flex flex-col items-center space-y-4">
+        <Skeleton className="h-60 w-9" />
+        <Skeleton className="h-8 w-9" />
+      </div>
+      <div className="flex flex-col items-center space-y-4">
+        <Skeleton className="h-40 w-9" />
+        <Skeleton className="h-8 w-9" />
+      </div>
+      <div className="flex flex-col items-center space-y-4">
+        <Skeleton className="h-20 w-9" />
+        <Skeleton className="h-8 w-9" />
+      </div>
+      <div className="flex flex-col items-center space-y-4">
+        <Skeleton className="h-10 w-9" />
+        <Skeleton className="h-8 w-9" />
+      </div>
+      <div className="flex flex-col items-center space-y-4 max-sm:hidden">
+        <Skeleton className="h-6 w-9" />
+        <Skeleton className="h-8 w-9" />
+      </div>
+      {Array.from({ length: 4 }).map((_, idx) => (
+        <div
+          key={idx}
+          className="flex flex-col items-center space-y-4 max-md:hidden"
+        >
+          <Skeleton className="h-3 w-9" />
+          <Skeleton className="h-8 w-9" />
+        </div>
+      ))}
+      <div className="flex flex-col items-center space-y-4">
+        <Skeleton className="h-1 w-9" />
+        <Skeleton className="h-8 w-9" />
+      </div>
+    </div>
+    <Skeleton className="mx-auto w-80" />
+  </div>
+)
+
+export default Loading

src/components/EnergyConsumptionChart/lazy.tsx

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

src/components/EnergyConsumptionChart/loading.tsx

@@ -0,0 +1,11 @@
+import { Skeleton } from "../ui/skeleton"
+import { Spinner } from "../ui/spinner"
+
+const Loading = () => (
+  <div className="relative flex h-10.5 w-full items-center overflow-hidden rounded-lg lg:w-56">
+    <Skeleton className="absolute size-full" />
+    <Spinner className="ms-2 animate-pulse-light text-2xl" />
+  </div>
+)
+
+export default Loading

src/components/EnergyConsumptionChart/server.tsx

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