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
|
|
@ -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