One loading screen everywhere (the deck wizard's)

The deck wizard had the good one — app icon, rotating stage message as the
headline, progress bar, stage checklist, tip, Cancel — while homework showed
a spinner with a title and route loads a pulsing icon with a smaller line.
All of them now render components/LoadingState:

- the wizard passes its vision/generation stages and keeps its deck tips;
- homework passes the same shape with homework wording (no tips: they are
  deck-specific);
- route screens (review/stats/exam loading boundaries + the link overlay)
  pass a single message, no stages or progress.

Cancel stays a 44px touch target, the icon animation respects
prefers-reduced-motion, and the unused homework.loading.title string is
gone from both languages.

Suites: freeze-loading 6/6, review 18/18, wizard 88/88, mobile 105/105,
regression 38/38, native 31/31, phase-2 62/62, phase-3 30/30, i18n 13/13.
README: decision 60. SW -> freezmo-v47.

components/homework/HomeworkLoading.tsx

@@ -1,13 +1,13 @@
 "use client";
 
-import { useEffect, useState } from "react";
-
-import { Button, ProgressBar, Spinner } from "@/components/ui";
+import { LoadingState, type LoadingStage } from "@/components/LoadingState";
 import type { HomeworkProgress } from "@/lib/client-api";
-import { useI18n } from "@/lib/i18n";
 import type { HomeworkMode } from "@/lib/schemas";
 
-/** Staged loading state while the assignment is read and answered. */
+/**
+ * Loading state while the assignment is read and answered — the same screen
+ * as the deck wizard (components/LoadingState), with the homework wording.
+ */
 export function HomeworkLoading({
   progress,
   mode,
@@ -17,35 +17,27 @@ export function HomeworkLoading({
   mode: HomeworkMode;
   onCancel: () => void;
 }) {
-  const { t } = useI18n();
-  const vision = progress.stage === "vision";
-  const keys = vision
-    ? ["homework.loading.reading", "homework.loading.vision2"]
-    : mode === "make"
-      ? ["homework.loading.writing", "homework.loading.gen2", "homework.loading.gen3"]
-      : ["homework.loading.planning", "homework.loading.gen2", "homework.loading.gen3"];
-  const [tick, setTick] = useState(0);
-
-  useEffect(() => {
-    const id = window.setInterval(() => setTick((value) => value + 1), 2400);
-    return () => window.clearInterval(id);
-  }, []);
-
-  const message = progress.message && tick === 0 ? progress.message : t(keys[tick % keys.length]);
+  const generationKey =
+    mode === "make" ? "homework.loading.writing" : mode === "check" ? "homework.loading.checking" : "homework.loading.planning";
+  const stages: LoadingStage[] = [
+    {
+      id: "vision",
+      labelKey: "homework.loading.reading",
+      messageKeys: ["homework.loading.reading", "homework.loading.vision2"],
+    },
+    {
+      id: "generation",
+      labelKey: generationKey,
+      messageKeys: [generationKey, "homework.loading.gen2", "homework.loading.gen3"],
+    },
+  ];
 
   return (
-    <div className="animate-rise flex flex-col items-center gap-5 py-16 text-center sm:py-24">
-      <Spinner className="size-8 text-accent-500" />
-      <h1 className="text-[20px] font-semibold tracking-[-0.01em] text-[var(--text)]">{t("homework.loading.title")}</h1>
-      <div className="w-full max-w-sm space-y-2">
-        <ProgressBar value={vision ? 1 : 2} max={2} label={message} />
-        <p className="text-[13.5px] font-medium text-[var(--text-muted)]" role="status" aria-live="polite">
-          {message}
-        </p>
-      </div>
-      <Button variant="ghost" size="sm" className="touch-target" onClick={onCancel}>
-        {t("common.cancel")}
-      </Button>
-    </div>
+    <LoadingState
+      stages={stages}
+      activeStage={progress.stage}
+      message={progress.message}
+      onCancel={onCancel}
+    />
   );
 }