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

@@ -47,7 +47,8 @@ import { wizardBusy } from "@/lib/wizard-busy";
 import { cn, uid } from "@/lib/utils";
 import { CameraIcon, ChevronDownIcon, FolderIcon, IceCubeIcon, PlusIcon, SnowflakeIcon, SparklesIcon, SunIcon } from "@/components/icons";
 import { SegmentedPill } from "@/components/SegmentedPill";
-import { Button, ProgressBar } from "@/components/ui";
+import { Button } from "@/components/ui";
+import { LoadingState, type LoadingStage } from "@/components/LoadingState";
 import { WizardActionBar } from "@/components/WizardActionBar";
 
 type Phase = "idle" | "preparing" | "loading" | "error";
@@ -98,6 +99,12 @@ const COUNT_OPTIONS = [8, 10, 12, 15];
 
 const GENERATION_TIPS = ["upload.tip1", "upload.tip2", "upload.tip3", "upload.tip4"];
 
+/** Same loading screen as the rest of the app (components/LoadingState). */
+const UPLOAD_STAGES: LoadingStage[] = [
+  { id: "vision", labelKey: "upload.vision1", messageKeys: ["upload.vision1", "upload.vision2", "upload.vision3"] },
+  { id: "generation", labelKey: "upload.gen1", messageKeys: ["upload.gen1", "upload.gen2", "upload.gen3"] },
+];
+
 export function UploadScreen() {
   const router = useRouter();
   const { t, plural } = useI18n();
@@ -599,7 +606,15 @@ export function UploadScreen() {
         : t("upload.addToStart");
 
   if (phase === "loading") {
-    return <LoadingState progress={progress} onCancel={() => abortRef.current?.abort()} />;
+    return (
+      <LoadingState
+        stages={UPLOAD_STAGES}
+        activeStage={progress.stage}
+        message={progress.message}
+        tipKeys={GENERATION_TIPS}
+        onCancel={() => abortRef.current?.abort()}
+      />
+    );
   }
 
   /* Phones: the 3-step flow. Same state as the desktop card, different shape. */
@@ -1343,75 +1358,3 @@ export function UploadScreen() {
 /* Loading state                                                       */
 /* ------------------------------------------------------------------ */
 
-const STAGE_STEPS: Array<{ stage: GenerateProgress["stage"]; keys: string[] }> = [
-  { stage: "vision", keys: ["upload.vision1", "upload.vision2", "upload.vision3"] },
-  { stage: "generation", keys: ["upload.gen1", "upload.gen2", "upload.gen3"] },
-];
-
-function LoadingState({ progress, onCancel }: { progress: GenerateProgress; onCancel: () => void }) {
-  const { t } = useI18n();
-  const reduceMotion = useReducedMotion();
-  const [tick, setTick] = useState(0);
-  const [tip, setTip] = useState(0);
-
-  useEffect(() => {
-    const timer = window.setInterval(() => setTick((value) => value + 1), 3200);
-    return () => window.clearInterval(timer);
-  }, []);
-
-  useEffect(() => {
-    setTip(Math.floor(Math.random() * GENERATION_TIPS.length));
-  }, []);
-
-  const activeIndex = progress.stage === "vision" ? 0 : 1;
-  const keys = STAGE_STEPS[activeIndex].keys;
-  const message = progress.message && tick === 0 ? progress.message : t(keys[tick % keys.length]);
-
-  return (
-    <div 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={{ 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={message}
-          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"
-        >
-          {message}
-        </motion.p>
-        <ProgressBar value={activeIndex + 1} max={2} label={t("upload.generationProgress")} />
-        <ol className="space-y-1 text-left text-[14.5px] leading-relaxed text-[var(--text-muted)]">
-          {STAGE_STEPS.map((step, index) => (
-            <li key={step.stage} className="flex items-center gap-2">
-              <span aria-hidden>
-                {index < activeIndex ? "✅" : index === activeIndex ? "🌀" : "⬜"}
-              </span>
-              {t(step.keys[0])}
-            </li>
-          ))}
-        </ol>
-        <p className="pt-2 text-[12.5px] text-[var(--text-subtle)]">{t(GENERATION_TIPS[tip])}</p>
-        <Button variant="ghost" size="sm" onClick={onCancel}>
-          {t("upload.cancel")}
-        </Button>
-      </div>
-    </div>
-  );
-}