init

components/ai-analysis-card.tsx

@@ -4,12 +4,12 @@ import { useActionState } from "react";
 import { Sparkles } from "lucide-react";
 import { generateAnalysisAction } from "@/app/ai/actions";
 import { formatDate } from "@/lib/format";
-import type { AiAnalysis, AiAnalysisTargetType } from "@/lib/models/analysis";
+import type { AiAnalysisTargetType, SerializedAiAnalysis } from "@/lib/models/analysis";
 
 type AiAnalysisCardProps = {
   targetType: AiAnalysisTargetType;
   targetId: string;
-  analysis: AiAnalysis | null;
+  analysis: SerializedAiAnalysis | null;
 };
 
 export function AiAnalysisCard({ targetType, targetId, analysis }: AiAnalysisCardProps) {

components/dashboard-analysis-card.tsx

@@ -4,10 +4,10 @@ import { useActionState } from "react";
 import { Sparkles } from "lucide-react";
 import { generateDashboardAnalysisAction } from "@/app/ai/actions";
 import { formatDate } from "@/lib/format";
-import type { AiAnalysis } from "@/lib/models/analysis";
+import type { SerializedAiAnalysis } from "@/lib/models/analysis";
 
 type Props = {
-  analysis: AiAnalysis | null;
+  analysis: SerializedAiAnalysis | null;
 };
 
 export function DashboardAnalysisCard({ analysis }: Props) {

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 (

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>