init

components/exercise-progress-chart.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import { CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
 
 type ExerciseProgressChartProps = {
@@ -26,8 +27,18 @@ function E1rmDelta({ data }: { data: ExerciseProgressChartProps["data"] }) {
 }
 
 export function ExerciseProgressChart({ name, data }: ExerciseProgressChartProps) {
-  if (data.length < 2) {
-    return null;
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+
+  if (data.length < 2) return null;
+
+  if (!mounted) {
+    return (
+      <div className="w-full rounded-lg border border-muted/40 bg-surface p-4">
+        <div className="mb-2 h-4 w-32 animate-pulse rounded bg-muted/30" />
+        <div className="h-[150px] animate-pulse rounded bg-muted/20" />
+      </div>
+    );
   }
 
   return (