perf(ssr): wrap statistics cards from about page with `<Suspense />…

…` tag

src/app/about/sections/dashboard/card-skeleton.tsx

@@ -0,0 +1,8 @@
+export function CardSkeleton() {
+  return (
+    <div className="flex flex-col justify-center gap-2 rounded-3xl bg-neutral-200 p-4 dark:bg-neutral-950 md:p-7">
+      <div className="h-4 w-1/3 animate-pulse rounded-3xl bg-neutral-300 dark:bg-neutral-800" />
+      <div className="h-5 w-2/3 animate-pulse rounded-3xl bg-neutral-400 dark:bg-neutral-700" />
+    </div>
+  )
+}

src/app/about/sections/dashboard/grid-skeleton.tsx

@@ -0,0 +1,14 @@
+import { CardSkeleton } from './card-skeleton'
+
+export function GridSkeleton() {
+  return (
+    <div className="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3">
+      <CardSkeleton />
+      <CardSkeleton />
+      <CardSkeleton />
+      <CardSkeleton />
+      <CardSkeleton />
+      <CardSkeleton />
+    </div>
+  )
+}

src/app/about/sections/dashboard/index.tsx

@@ -1,36 +1,25 @@
 import { Suspense } from 'react'
+
 import { AgeCard } from './cards/age'
 import { GithubFollowers } from './cards/github-followers'
 import { GithubStars } from './cards/github-stars'
 import { LastTrack } from './cards/last-track'
 import { SpotifyPlays } from './cards/spotify-plays'
 import { TopArtist } from './cards/top-artist'
-import { LoadingCard } from './loading-card'
+
+import { GridSkeleton } from './grid-skeleton'
 
 export function Dashboard() {
   return (
-    <div className="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3">
-      <AgeCard />
-
-      <Suspense fallback={<LoadingCard />}>
+    <Suspense fallback={<GridSkeleton />}>
+      <div className="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3">
+        <AgeCard />
         <GithubStars />
-      </Suspense>
-
-      <Suspense fallback={<LoadingCard />}>
         <GithubFollowers />
-      </Suspense>
-
-      <Suspense fallback={<LoadingCard />}>
         <SpotifyPlays />
-      </Suspense>
-
-      <Suspense fallback={<LoadingCard />}>
         <TopArtist />
-      </Suspense>
-
-      <Suspense fallback={<LoadingCard />}>
         <LastTrack />
-      </Suspense>
-    </div>
+      </div>
+    </Suspense>
   )
 }