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>
+  );
+}

components/RouteLoading.tsx

@@ -1,31 +1,17 @@
 "use client";
 
-import { Spinner } from "@/components/ui";
-import { useI18n } from "@/lib/i18n";
+import { LoadingState } from "@/components/LoadingState";
 
 /**
  * Route-level loading screen (used by `loading.tsx` boundaries and by client
  * screens that wait for local data). Rendered the moment a navigation starts,
- * so a slow request never looks like a dead tap.
+ * so a slow request never looks like a dead tap. Same loading screen as the
+ * rest of the app, without pipeline stages.
  */
 export function RouteLoading({ messageKey }: { messageKey: string }) {
-  const { t } = useI18n();
-
   return (
-    <div role="status" aria-busy="true" className="frost-bg grid min-h-dvh place-items-center px-4">
-      <div className="flex flex-col items-center gap-4 text-center">
-        {/* eslint-disable-next-line @next/next/no-img-element -- static app icon, no optimisation needed */}
-        <img
-          src="/icons/icon-192.png"
-          alt=""
-          aria-hidden
-          className="size-16 rounded-[1.15rem] shadow-lift motion-safe:animate-pulse"
-        />
-        <p className="flex items-center gap-2 text-sm font-semibold text-[var(--text-muted)]">
-          <Spinner className="size-4" />
-          {t(messageKey)}
-        </p>
-      </div>
+    <div className="frost-bg grid min-h-dvh place-items-center px-4">
+      <LoadingState messageKey={messageKey} />
     </div>
   );
 }

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>
-  );
-}

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}
+    />
   );
 }