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.

components/LibraryScreen.tsx

@@ -8,6 +8,7 @@ import { DeckCard } from "@/components/DeckCard";
 import { FolderBar } from "@/components/FolderBar";
 import { HomeworkCard } from "@/components/HomeworkCard";
 import { EllipsisIcon, FolderIcon, UploadIcon } from "@/components/icons";
+import { LinkLoadingScreen } from "@/components/LinkLoadingScreen";
 import { SegmentedPill } from "@/components/SegmentedPill";
 import { Button, EmptyState, ProgressBar } from "@/components/ui";
 import { createFolder, folderStore, renameFolder } from "@/lib/folders";
@@ -306,6 +307,7 @@ export function LibraryScreen({ initialTab = "decks" }: { initialTab?: "decks" |
         <div className="flex flex-wrap gap-2">
           <Link
             href="/review"
+            prefetch
             aria-disabled={due === 0}
             className={cn(
               "touch-target inline-flex h-10 items-center rounded-xl px-3.5 text-[13px] font-semibold transition",
@@ -313,9 +315,11 @@ export function LibraryScreen({ initialTab = "decks" }: { initialTab?: "decks" |
             )}
           >
             {t("review.title")} · {plural(due, "review.due")}
+            <LinkLoadingScreen messageKey="review.preparing" />
           </Link>
           <Link
             href="/review?mistakes=1"
+            prefetch
             aria-disabled={mistakes === 0}
             className={cn(
               "touch-target inline-flex h-10 items-center rounded-xl px-3.5 text-[13px] font-semibold transition",
@@ -323,6 +327,7 @@ export function LibraryScreen({ initialTab = "decks" }: { initialTab?: "decks" |
             )}
           >
             {t("review.mistakesTitle")} · {plural(mistakes, "review.mistakes")}
+            <LinkLoadingScreen messageKey="review.preparing" />
           </Link>
         </div>
       </section>

components/LinkLoadingScreen.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { useLinkStatus } from "next/link";
+
+import { RouteLoading } from "@/components/RouteLoading";
+
+/**
+ * A full-screen loading screen that appears the instant the surrounding
+ * `<Link>` starts navigating — before any response arrives — so a slow route
+ * never looks like a dead tap. Renders nothing while idle and disappears with
+ * the page that owns it.
+ */
+export function LinkLoadingScreen({ messageKey }: { messageKey: string }) {
+  const { pending } = useLinkStatus();
+
+  if (!pending) return null;
+
+  return (
+    <div className="pointer-events-none fixed inset-0 z-50">
+      <RouteLoading messageKey={messageKey} />
+    </div>
+  );
+}

components/ReviewClient.tsx

@@ -4,6 +4,7 @@ import { useEffect, useMemo, useState, useSyncExternalStore } from "react";
 import { useRouter } from "next/navigation";
 
 import { SessionFeed, type SessionItem } from "@/components/SessionFeed";
+import { RouteLoading } from "@/components/RouteLoading";
 import { Button } from "@/components/ui";
 import { haptic } from "@/lib/haptics";
 import { ensureLearningHydrated, learningStore, recordAnswer } from "@/lib/history";
@@ -53,14 +54,7 @@ export function ReviewClient({ mistakes, deckId }: { mistakes: boolean; deckId?:
     : t("review.title");
 
   if (!ready) {
-    return (
-      <main className="frost-bg grid min-h-dvh place-items-center px-4">
-        <div className="w-full max-w-xl space-y-4" aria-busy="true" aria-label={title}>
-          <div className="skeleton h-24 rounded-3xl" />
-          <div className="skeleton h-12 rounded-2xl" />
-        </div>
-      </main>
-    );
+    return <RouteLoading messageKey="review.preparing" />;
   }
 
   if (!session) {

components/RouteLoading.tsx

@@ -0,0 +1,31 @@
+"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>
+  );
+}