Martin Dvorak
2103f9fc69
Reported: tapping Review due could sit for many seconds with no loading screen. The flow itself is local and fast (counts are hydrated on the library; <1.5s even at 6x CPU throttle with 3,000 answers), so the visible fault was missing feedback: /review is a dynamic route and until its payload arrived nothing on screen changed. - LinkLoadingScreen: the review card links render a full-screen loading screen from the link's own useLinkStatus pending state, the instant the tap happens (measured 58 ms with the route request held open). The links also prefetch their payload. - Route loading boundaries (loading.tsx) for /review, /stats and /exam, sharing a RouteLoading screen (app icon + spinner + localized message); ReviewClient's bare skeleton replaced with it. - Health probes: per-key 30s cache + in-flight sharing in use-health.ts (every page mounts its own gate; a session now fires one probe instead of one per navigation). Manual re-check still forces. - Czech fix: exam heading 'Zkouškové režim' -> 'Zkouškový režim'. Verified by the rebuilt suites (the /tmp harness was wiped overnight): review-loading 15/15 (stalled-request loading screen at 58 ms, session arrival after release, fast normal path, mistakes path, end-to-end grading, probe cache) and navigation 78/78 (tab bar, labels 360/390 EN/CS, routing, deep links, wizard loading lock). Lint + build clean. SW freezmo-v30.
31 lines
1.1 KiB
TypeScript
31 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import { Spinner } from "@/components/ui";
|
|
import { useI18n } from "@/lib/i18n";
|
|
|
|
/**
|
|
* 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.
|
|
*/
|
|
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>
|
|
);
|
|
}
|