Remove everything that can change after first paint

Firefox users saw a flash on the first navigation after an idle spell, and
Chrome occasionally flashed white. Nothing in the network path explained it
(assets are immutable, the stylesheet is render-blocking, a cold Firefox
load paints fully styled), so this removes every remaining way a page could
look different between its first paint and its final state:

- Both Newsreader faces are embedded in the served stylesheet as data: URIs
  (CSP gains `font-src 'self' data:`; the preloads go away). A font fetched
  by URL is applied after first paint whenever the browser has to bring it
  back from disk, which is exactly the "first click after a while" case.
- The cross-document view transition is gone; the operator wants snappy.
- A color-scheme meta, kept in step with the saved theme, so the canvas the
  browser paints before the stylesheet is the right shade.
- The theme toggle's icon and label are chosen by CSS from html[data-theme]
  (set pre-paint by theme.js) instead of being rewritten by app.js.
- Dashboard table filters are rendered by the templates (shown under
  `.has-js`) rather than inserted by app.js, so tables no longer jump.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MD4VWGq6mGcd8Bg67qyx9k
This commit is contained in:
thalladaandClaude Fable 5.1 committed 2026-09-04 18:37:44 +00:00
1 parent 9acd1b0800
commit 1047cf4633
13 files changed
+91 -82

No files matched your search

+10 -2
View File
@@ -2,10 +2,18 @@
// Marks the document as scripted before first paint so progressively enhanced
// widgets (the contents panel) can start collapsed without a flash.
document.documentElement.classList.add("has-js");
// The color-scheme meta decides what the browser paints before the stylesheet
// arrives; keep it in step with an explicit theme so that first paint is not
// the wrong shade.
const scheme = document.querySelector('meta[name="color-scheme"]');
try {
const theme = localStorage.getItem("theme");
if (theme === "light" || theme === "dark") document.documentElement.dataset.theme = theme;
else document.documentElement.removeAttribute("data-theme");
if (theme === "light" || theme === "dark") {
document.documentElement.dataset.theme = theme;
if (scheme) scheme.content = theme;
} else {
document.documentElement.removeAttribute("data-theme");
}
} catch (_) {
document.documentElement.removeAttribute("data-theme");
}