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:
parent
abacfb6018
commit
2d4d4ee776
7 changed files with 187 additions and 129 deletions
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue