feat(ui): add loading feedback for statstic cards

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

@@ -7,7 +7,7 @@ type CardProps = {
 
 export function Card({ content, title }: CardProps) {
   return (
-    <div className="flex flex-col gap-2 rounded-3xl bg-neutral-200 p-4 dark:bg-neutral-950 md:p-7">
+    <div className="flex flex-col justify-center gap-2 rounded-3xl bg-neutral-200 p-4 leading-none dark:bg-neutral-950 md:p-7">
       <span className="text-neutral-600">{title}</span>
       <span className="text-xl">{content}</span>
     </div>

src/app/about/sections/dashboard/cards/github-followers.tsx

@@ -1,6 +1,7 @@
 import Image from 'next/image'
 import { Card } from '../card'
 import { ApiErrorMessage } from '../api-error'
+import { placeholder } from '../placeholder'
 
 type User = {
   followers: number
@@ -41,7 +42,7 @@ export async function GithubFollowers() {
     return array
   }
 
-  const AVATAR_COUNT = 7
+  const AVATAR_COUNT = 8
 
   const slicedFollowers: Follower[] = shuffle(followersList).slice(
     0,
@@ -70,6 +71,7 @@ export async function GithubFollowers() {
                     alt=""
                     width={400}
                     height={400}
+                    placeholder={placeholder(28, 28) as `data:image/${string}`}
                     className="w-7 rounded-full border-2 border-neutral-200 transition-all hover:border-neutral-600 dark:border-neutral-950 dark:hover:border-neutral-400"
                   />
                 </a>

src/app/about/sections/dashboard/cards/last-track.tsx

@@ -1,6 +1,8 @@
 import Image from 'next/image'
+
 import { Card } from '../card'
 import { ApiErrorMessage } from '../api-error'
+import { placeholder } from '../placeholder'
 
 type Track = {
   artist: {
@@ -53,6 +55,7 @@ export async function LastTrack() {
             alt="Artist Image"
             width={300}
             height={300}
+            placeholder={placeholder(24, 24) as `data:image/${string}`}
             className="w-6"
           />
           <span className="block overflow-hidden overflow-ellipsis whitespace-nowrap">

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

@@ -1,19 +1,37 @@
+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 { Card } from './card'
+import { LoadingCard } from './loading-card'
 
 export function Dashboard() {
   return (
     <div className="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3">
       <AgeCard />
-      <GithubStars />
-      <GithubFollowers />
-      <SpotifyPlays />
-      <TopArtist />
-      <LastTrack />
+
+      <Suspense fallback={<LoadingCard />}>
+        <GithubStars />
+      </Suspense>
+
+      <Suspense fallback={<LoadingCard />}>
+        <GithubFollowers />
+      </Suspense>
+
+      <Suspense fallback={<LoadingCard />}>
+        <SpotifyPlays />
+      </Suspense>
+
+      <Suspense fallback={<LoadingCard />}>
+        <TopArtist />
+      </Suspense>
+
+      <Suspense fallback={<LoadingCard />}>
+        <LastTrack />
+      </Suspense>
     </div>
   )
 }

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

@@ -0,0 +1,8 @@
+export function LoadingCard() {
+  return (
+    <div className="flex animate-pulse 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 bg-neutral-300 dark:bg-neutral-800" />
+      <div className="h-5 w-2/3 bg-neutral-400 dark:bg-neutral-700" />
+    </div>
+  )
+}

src/app/about/sections/dashboard/placeholder.ts

@@ -0,0 +1,22 @@
+export function placeholder(w: number, h: number) {
+  const shimmer = `
+  <svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+      <linearGradient id="g">
+        <stop stop-color="#888" offset="20%" />
+        <stop stop-color="#777" offset="50%" />
+        <stop stop-color="#888" offset="70%" />
+      </linearGradient>
+    </defs>
+    <rect width="${w}" height="${h}" fill="#888" />
+    <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
+    <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
+  </svg>`
+
+  const toBase64 = (str: string) =>
+    typeof window === 'undefined'
+      ? Buffer.from(str).toString('base64')
+      : window.btoa(str)
+
+  return `data:image/svg+xml;base64,${toBase64(shimmer)}`
+}

tailwind.config.js

@@ -1,3 +1,5 @@
+import defaultTheme from 'tailwindcss/defaultTheme'
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./src/**/*.{ts,tsx}'],
@@ -96,6 +98,7 @@ module.exports = {
       }
     },
     keyframes: {
+      ...defaultTheme.keyframes,
       ping: {
         '0%': {
           transform: 'scale(1)'