refactor: client, loading, server component breakdown

Author: wackerow

app/[locale]/what-is-ethereum/_components/WhatTabs/index.tsx renamed to app/[locale]/what-is-ethereum/_components/WhatTabs/client.tsx

@@ -0,0 +1,14 @@
+import { Skeleton, SkeletonLines } from "@/components/ui/skeleton"
+
+const Loading = () => (
+  <>
+    <div className="mb-4 flex w-2/3 gap-4 border-b py-4">
+      <Skeleton className="flex-1" />
+      <Skeleton className="flex-1" />
+    </div>
+    <div className="h-fit rounded-lg border p-8">
+      <SkeletonLines noOfLines={5} className="pt-0" />
+    </div>
+  </>
+)
+export default Loading

app/[locale]/what-is-ethereum/_components/WhatTabs/lazy.tsx

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

app/[locale]/what-is-ethereum/_components/WhatTabs/loading.tsx

@@ -0,0 +1,11 @@
+import { Skeleton, SkeletonLines } from "@/components/ui/skeleton"
+
+const Loading = () => (
+  <div className="h-fit space-y-8 rounded border bg-background p-8">
+    <SkeletonLines noOfLines={5} />
+    <SkeletonLines noOfLines={5} />
+    <Skeleton className="mx-auto h-5 w-40 rounded-full" />
+  </div>
+)
+
+export default Loading

app/[locale]/what-is-ethereum/_components/WhatTabs/server.tsx

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

app/[locale]/what-is-ethereum/_components/WhySwiper/index.tsx renamed to app/[locale]/what-is-ethereum/_components/WhySwiper/client.tsx

@@ -43,8 +43,8 @@ import {
   getRequiredNamespacesForPage,
 } from "@/lib/utils/translations"
 
-import WhatTabs from "./_components/WhatTabs/lazy"
-import WhySwiper from "./_components/WhySwiper/lazy"
+import WhatTabs from "./_components/WhatTabs/server"
+import WhySwiper from "./_components/WhySwiper/server"
 
 import { fetchGrowThePie } from "@/lib/api/fetchGrowThePie"
 import dogeComputerImg from "@/public/images/doge-computer.png"