feat(gluwave): 🎨 show skeleton before charts load

gluwave/src/app/(app-menu)/page.tsx

@@ -1,13 +1,15 @@
 import { validateRequest } from '@/auth'
 import BloodGlucose from '@/components/blood-glucose'
 import { CarbohydratesOnBoard } from '@/components/carbohydrates-on-board'
+import { GraphSkeleton } from '@/components/graph-container'
 import InsulinOnBoard from '@/components/insulin-on-board'
 import { db } from '@/db'
 import { glucose } from '@/schema'
 import { addMinutes } from 'date-fns'
 import { and, desc, eq, gte } from 'drizzle-orm'
 import { Metadata } from 'next'
 import { redirect } from 'next/navigation'
+import { Suspense } from 'react'
 
 const getLastGlucose = async (userId: string): Promise<number | undefined> => {
   const [last] = await db
@@ -48,10 +50,16 @@ export async function generateMetadata(): Promise<Metadata> {
 export default async function App() {
   return (
     <div className="mt-2 grid gap-2 mx-auto sm:grid-cols-2 max-w-5xl min-[420px]:px-2 md:px-4">
-      <BloodGlucose />
-      <InsulinOnBoard />
+      <Suspense fallback={<GraphSkeleton />}>
+        <BloodGlucose />
+      </Suspense>
+      <Suspense fallback={<GraphSkeleton />}>
+        <InsulinOnBoard />
+      </Suspense>
       {/* <CarbsRate /> */}
-      <CarbohydratesOnBoard />
+      <Suspense fallback={<GraphSkeleton />}>
+        <CarbohydratesOnBoard />
+      </Suspense>
     </div>
   )
 }

gluwave/src/components/graph-container.tsx

@@ -14,6 +14,7 @@ import {
   VictoryZoomContainer,
 } from 'victory'
 
+import { Skeleton } from './ui/skeleton'
 import { victoryTheme } from './victory-theme'
 
 interface Props {
@@ -123,3 +124,23 @@ export const GraphContent = ({
 }
 
 export const padding = { top: 10, bottom: 25, left: 27, right: 15 }
+
+interface GraphSkeletonProps {
+  height?: string
+}
+
+export const GraphSkeleton = ({ height }: GraphSkeletonProps) => {
+  return (
+    <GraphContainer>
+      <GraphTitle>
+        <div className="flex flex-col gap-2">
+          <Skeleton className="w-40 h-4" />
+          <Skeleton className="w-20 h-4" />
+        </div>
+      </GraphTitle>
+      <div className={cn('p-4')}>
+        <Skeleton className={cn('w-full h-[250px] rounded-xl', height)} />
+      </div>
+    </GraphContainer>
+  )
+}

gluwave/src/components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from '@/lib/utils'
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn('animate-pulse rounded-md bg-muted', className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }