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.
This commit is contained in:
Martin Dvořák 2026-10-12 18:43:53 +00:00
commit 2d4d4ee776
7 changed files with 187 additions and 129 deletions

View file

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