v4: the page a visit lands on asks for its content while its code loads — a first load went one step after the other: the entry script, then the interface's messages, then the page's chunk and its twenty-odd dependencies, and only then the request for the feed. The built page now carries a script in its head that asks for the messages' chunk at once, beside the entry, picking the language as detectLocale does (preloadCatalog in vite.config.ts; the two must agree). And main.tsx sends the landing page's first request as the app boots (utils/shared/earlyFetch.ts): the feed's first page on / and its tabs, the dump on a dump's page, as the stored session. authFetch hands that response to the page that asks for the same URL, once, to the session it was sent as and within ten seconds, in place of a request of its own; past that the page asks again. feedApiUrl (utils/shared/urls.ts) is the feed's URL for both. A category's feed, a profile, a playlist and the other pages wait for their code as before. On a local build with 150 ms of latency added, the feed's request leaves at 0.69 s where it left at 1.70 s, and the first card shows at 1.59 s where it showed at 1.92 s.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/hooks/auth/useAuth.ts

@@ -12,6 +12,7 @@ import { AuthContext } from "../../contexts/auth/AuthContext.ts";
 import type { AuthResponse, SelfUser } from "../../../shared/user.ts";
 import type { UserSettings } from "../../../shared/settings.ts";
 import type { Session } from "../../utils/auth/storage.ts";
+import { takeEarly } from "../../utils/shared/earlyFetch.ts";
 import {
   forgetStoredSession,
   isTokenExpired,
@@ -113,7 +114,13 @@ export function useAuth(): UseAuthResult {
 
     const isFormData = init.body instanceof FormData;
 
-    const res = await fetch(input, {
+    // The page a visit lands on finds its first request already sent, as the
+    // app booted (utils/shared/earlyFetch.ts).
+    const early = typeof input === "string" &&
+        (init.method ?? "GET") === "GET"
+      ? takeEarly(input, token)
+      : undefined;
+    const res = await (early ?? fetch(input, {
       ...init,
       headers: {
         ...(init.headers ?? {}),
@@ -121,7 +128,7 @@ export function useAuth(): UseAuthResult {
         // The browser sets FormData's Content-Type, with its boundary.
         ...(isFormData ? {} : { "Content-Type": "application/json" }),
       },
-    });
+    }));
 
     if (res.status === 401) {
       logout();