From 0f31031adf28d974354341f2b19cbaab3692d400 Mon Sep 17 00:00:00 2001
From: Max Kalhama <kalhama.max@gmail.com>
Date: Thu, 26 Sep 2024 15:31:11 +0300
Subject: [PATCH] feat(gluwave): :art: show skeleton before charts load

---
 gluwave/src/app/(app-menu)/page.tsx        | 14 +++++++++++---
 gluwave/src/components/graph-container.tsx | 21 +++++++++++++++++++++
 gluwave/src/components/ui/skeleton.tsx     | 15 +++++++++++++++
 3 files changed, 47 insertions(+), 3 deletions(-)
 create mode 100644 gluwave/src/components/ui/skeleton.tsx

diff --git a/gluwave/src/app/(app-menu)/page.tsx b/gluwave/src/app/(app-menu)/page.tsx
index 07569d1..845a565 100644
--- a/gluwave/src/app/(app-menu)/page.tsx
+++ b/gluwave/src/app/(app-menu)/page.tsx
@@ -1,6 +1,7 @@
 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'
@@ -8,6 +9,7 @@ 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>
   )
 }
diff --git a/gluwave/src/components/graph-container.tsx b/gluwave/src/components/graph-container.tsx
index 46c1085..572cf5f 100644
--- a/gluwave/src/components/graph-container.tsx
+++ b/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>
+  )
+}
diff --git a/gluwave/src/components/ui/skeleton.tsx b/gluwave/src/components/ui/skeleton.tsx
new file mode 100644
index 0000000..c23a30d
--- /dev/null
+++ b/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 }