init

components/volume-chart.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
 
 type VolumeChartProps = {
@@ -7,6 +8,18 @@ type VolumeChartProps = {
 };
 
 export function VolumeChart({ data }: VolumeChartProps) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+
+  if (!mounted) {
+    return (
+      <div className="w-full rounded-lg border border-muted/40 bg-surface p-4">
+        <div className="mb-2 h-4 w-56 animate-pulse rounded bg-muted/30" />
+        <div className="h-[180px] animate-pulse rounded bg-muted/20" />
+      </div>
+    );
+  }
+
   return (
     <div className="w-full rounded-lg border border-muted/40 bg-surface p-4">
       <div className="mb-2 text-sm text-fg/60">Wolumen treningowy (ciężar × powtórzenia)</div>