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:
parent
c662fb11f7
commit
2103f9fc69
11 changed files with 150 additions and 17 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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 };
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue