Smart Review: instant loading feedback, no more dead-feeling tap

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.
This commit is contained in:
Martin Dvořák 2026-10-11 14:35:16 +00:00
commit 2103f9fc69
11 changed files with 150 additions and 17 deletions

View file

@ -807,6 +807,7 @@ const en: Record<string, string> = {
"review.seeResults": "See results",
"review.finishFirst": "Finish the last activity to see your results.",
"review.results": "Results",
"review.preparing": "Preparing your review…",
"review.due.one": "{n} due",
"review.due.few": "{n} due",
"review.due.many": "{n} due",
@ -814,6 +815,7 @@ const en: Record<string, string> = {
"review.mistakes.few": "{n} mistakes",
"review.mistakes.many": "{n} mistakes",
"exam.title": "Exam mode",
"exam.preparing": "Preparing exam mode…",
"exam.subtitle": "Pick one or more decks, set a timer, no hints — see how you'd do.",
"exam.pickDecks": "Decks",
"exam.noDecks": "Create a deck first.",
@ -827,6 +829,7 @@ const en: Record<string, string> = {
"exam.studyMistakes": "Study mistakes",
"exam.timeLeft": "{time} left",
"stats.title": "Your progress",
"stats.preparing": "Preparing your progress…",
"stats.subtitle": "Streaks, accuracy and the topics that deserve another pass.",
"stats.streak": "Day streak",
"stats.today": "Today",
@ -1643,13 +1646,15 @@ const cs: Record<string, string> = {
"review.seeResults": "Zobrazit výsledky",
"review.finishFirst": "Dokonči poslední aktivitu a uvidíš výsledky.",
"review.results": "Výsledky",
"review.preparing": "Připravuji opakování…",
"review.due.one": "{n} k opakování",
"review.due.few": "{n} k opakování",
"review.due.many": "{n} k opakování",
"review.mistakes.one": "{n} chyba",
"review.mistakes.few": "{n} chyby",
"review.mistakes.many": "{n} chyb",
"exam.title": "Zkouškové režim",
"exam.title": "Zkouškový režim",
"exam.preparing": "Připravuji zkouškový režim…",
"exam.subtitle": "Vyber sady, nastav časovač, žádné nápovědy — uvidíš, jak bys dopadl.",
"exam.pickDecks": "Sady",
"exam.noDecks": "Nejdřív si vytvoř sadu.",
@ -1663,6 +1668,7 @@ const cs: Record<string, string> = {
"exam.studyMistakes": "Procvičit chyby",
"exam.timeLeft": "zbývá {time}",
"stats.title": "Tvůj pokrok",
"stats.preparing": "Připravuji pokrok…",
"stats.subtitle": "Série, úspěšnost a témata, která si zaslouží další kolo.",
"stats.streak": "Série dní",
"stats.today": "Dnes",

View file

@ -9,23 +9,55 @@ import { settingsStore } from "./settings";
/**
* Health status for the current browser (re-checks whenever the API key
* changes). Used by the settings dialog and the API-key gate.
*
* Every page mounts its own gate, and one probe can sit for seconds while
* Ollama answers — so probes are deduplicated per key and cached briefly
* instead of firing one per mount. The manual re-check always forces.
*/
const HEALTH_TTL_MS = 30_000;
let cache: { key: string; at: number; value: Health } | null = null;
let inflight: { key: string; promise: Promise<Health> } | null = null;
function loadHealth(key: string, force: boolean): Promise<Health> {
if (!force && cache && cache.key === key && Date.now() - cache.at < HEALTH_TTL_MS) {
return Promise.resolve(cache.value);
}
if (!force && inflight && inflight.key === key) return inflight.promise;
const promise = fetchHealth()
.then((value) => {
cache = { key, at: Date.now(), value };
return value;
})
.finally(() => {
if (inflight?.promise === promise) inflight = null;
});
inflight = { key, promise };
return promise;
}
export function useHealth() {
const apiKey = useSyncExternalStore(
settingsStore.subscribe,
() => settingsStore.getSnapshot().apiKey,
() => "",
);
const [health, setHealth] = useState<Health | null>(null);
const [health, setHealth] = useState<Health | null>(() =>
cache && cache.key === apiKey ? cache.value : null,
);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [checkedAt, setCheckedAt] = useState<number | null>(null);
const [checkedAt, setCheckedAt] = useState<number | null>(() =>
cache && cache.key === apiKey ? cache.at : null,
);
const refresh = useCallback(async () => {
const run = useCallback(async (force: boolean) => {
setLoading(true);
setError(null);
try {
setHealth(await fetchHealth());
const key = settingsStore.getSnapshot().apiKey;
setHealth(await loadHealth(key, force));
} catch (loadError) {
setError(loadError instanceof Error ? loadError.message : t("api.unreachableShort"));
} finally {
@ -36,8 +68,11 @@ export function useHealth() {
}, []);
useEffect(() => {
void refresh();
}, [refresh, apiKey]);
void run(false);
}, [run, apiKey]);
/** The settings dialog's re-check button: always a fresh probe. */
const refresh = useCallback(() => run(true), [run]);
return { health, loading, error, refresh, apiKey, checkedAt };
}