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.
78 lines
2.5 KiB
TypeScript
78 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { t } from "./i18n";
|
|
import { useCallback, useEffect, useState, useSyncExternalStore } from "react";
|
|
|
|
import { fetchHealth, type Health } from "./client-api";
|
|
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>(() =>
|
|
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>(() =>
|
|
cache && cache.key === apiKey ? cache.at : null,
|
|
);
|
|
|
|
const run = useCallback(async (force: boolean) => {
|
|
setLoading(true);
|
|
setError(null);
|
|
try {
|
|
const key = settingsStore.getSnapshot().apiKey;
|
|
setHealth(await loadHealth(key, force));
|
|
} catch (loadError) {
|
|
setError(loadError instanceof Error ? loadError.message : t("api.unreachableShort"));
|
|
} finally {
|
|
// Even a failed check is a check: the panel can say when it last ran.
|
|
setCheckedAt(Date.now());
|
|
setLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
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 };
|
|
}
|