refactor: CountDown lazy loading

Author: wackerow

app/[locale]/10years/_components/CountDown.tsx renamed to app/[locale]/10years/_components/CountDown/client.tsx

@@ -0,0 +1,17 @@
+import { Skeleton } from "@/components/ui/skeleton"
+
+const Loading = () => (
+  <div className="flex items-center justify-center gap-10">
+    {Array.from({ length: 4 }).map((_, idx) => (
+      <div
+        key={idx}
+        className="flex size-20 flex-col items-center justify-center gap-1 rounded-2xl border p-2 text-center shadow-md last:max-lg:hidden"
+      >
+        <Skeleton className="size-full" />
+        <Skeleton className="h-5 w-8" />
+      </div>
+    ))}
+  </div>
+)
+
+export default Loading

app/[locale]/10years/_components/CountDown/loading.tsx

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