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/LoadingState.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { motion, useReducedMotion } from "framer-motion";
+
+import { Button, ProgressBar } from "@/components/ui";
+import { useI18n } from "@/lib/i18n";
+
+/**
+ * The one loading screen for every model pipeline — deck/notes creation,
+ * homework, and the route-level "preparing…" screens: the app icon, the
+ * rotating stage message as the headline, the two-step progress bar, the
+ * checklist of stages, an optional tip and Cancel.
+ *
+ * Extracted from the deck wizard (the look people already know) so the
+ * homework flows and route loads read exactly the same.
+ */
+
+export type LoadingStage = {
+  id: string;
+  /** First line of the checklist (= the stage's first message). */
+  labelKey: string;
+  /** Rotating messages while this stage runs. */
+  messageKeys: string[];
+};
+
+export function LoadingState({
+  stages,
+  activeStage,
+  message,
+  messageKey,
+  tipKeys,
+  onCancel,
+}: {
+  /** Pipeline stages in order. Omit for a plain "working" screen. */
+  stages?: LoadingStage[];
+  /** Which stage is running now (matches a stage id). */
+  activeStage?: string;
+  /** Live message from the server; wins until the first rotation tick. */
+  message?: string;
+  /** Static message for screens without stages. */
+  messageKey?: string;
+  /** Pick one of these at random and show it under the stages. */
+  tipKeys?: string[];
+  onCancel?: () => void;
+}) {
+  const { t } = useI18n();
+  const reduceMotion = useReducedMotion();
+  const [tick, setTick] = useState(0);
+  const [tip, setTip] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!stages) return;
+    const timer = window.setInterval(() => setTick((value) => value + 1), 3200);
+    return () => window.clearInterval(timer);
+  }, [stages]);
+
+  useEffect(() => {
+    if (!tipKeys || tipKeys.length === 0) return;
+    setTip(tipKeys[Math.floor(Math.random() * tipKeys.length)]);
+  }, [tipKeys]);
+
+  const activeIndex = stages ? Math.max(0, stages.findIndex((stage) => stage.id === activeStage)) : 0;
+  const rotation = stages?.[activeIndex]?.messageKeys ?? [];
+  const shown =
+    tick === 0 && message
+      ? message
+      : rotation.length > 0
+        ? t(rotation[tick % rotation.length])
+        : messageKey
+          ? t(messageKey)
+          : "";
+
+  return (
+    <div
+      role="status"
+      aria-busy="true"
+      className="relative flex min-h-[70dvh] flex-col items-center justify-center gap-6 text-center"
+    >
+      {/* The app icon, not the bare snowflake — same logo as the header,
+          sidebar and empty states. */}
+      <motion.div
+        aria-hidden
+        animate={reduceMotion ? undefined : { rotate: [0, 8, -8, 0], scale: [1, 1.08, 1] }}
+        transition={{ duration: 3.2, repeat: Infinity, ease: "easeInOut" }}
+        className="relative size-28"
+      >
+        {/* eslint-disable-next-line @next/next/no-img-element -- static app icon, no optimisation needed */}
+        <img src="/icons/icon-512.png" alt="" className="size-28 rounded-[1.75rem] shadow-lift" />
+      </motion.div>
+
+      <div className="relative w-full max-w-md space-y-3">
+        <motion.p
+          key={shown}
+          initial={reduceMotion ? false : { opacity: 0, y: 8 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.22, ease: "easeOut" }}
+          className="text-xl font-extrabold text-[var(--text)]"
+          aria-live="polite"
+        >
+          {shown}
+        </motion.p>
+
+        {stages && stages.length > 0 ? (
+          <ProgressBar value={activeIndex + 1} max={stages.length} label={t("upload.generationProgress")} />
+        ) : null}
+
+        {stages && stages.length > 1 ? (
+          <ol className="space-y-1 text-left text-[14.5px] leading-relaxed text-[var(--text-muted)]">
+            {stages.map((stage, index) => (
+              <li key={stage.id} className="flex items-center gap-2">
+                <span aria-hidden>{index < activeIndex ? "✅" : index === activeIndex ? "🌀" : "⬜"}</span>
+                {t(stage.labelKey)}
+              </li>
+            ))}
+          </ol>
+        ) : null}
+
+        {tip ? <p className="pt-2 text-[12.5px] text-[var(--text-subtle)]">{t(tip)}</p> : null}
+
+        {onCancel ? (
+          <Button variant="ghost" size="sm" className="touch-target" onClick={onCancel}>
+            {t("upload.cancel")}
+          </Button>
+        ) : null}
+      </div>
+    </div>
+  );
+}