Boot loading screen

A full-page loading screen covers everything, so it only earns its place when there is truly nothing behind it. If the page already has content, let people read it; use skeletons or inline indicators for the parts still loading (see Wait UX).

A fake progress bar driven by a timer is wrong on fast and slow machines alike. The docs loading screen counts real files: JS and CSS files that finished loading, compared with the count from the previous visit (kept in localStorage). On the first visit, with nothing measured yet, it uses an estimate.

// Count same-origin JS / CSS files that finished loading
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) if (sameOrigin(entry)) count++;
}).observe({ type: "resource", buffered: true });

// Compare with the previous load; more files widen the denominator, so the bar slows down instead of going back
const measured = Math.min(0.95, count / Math.max(expected, count / 0.95));

// Only after the app renders (html[data-docs-ready]) does it run 95% → 100% over 400 ms
if (document.documentElement.hasAttribute("data-docs-ready")) finish();

The number holds at 95% until the page has rendered, so it never reports done before it is. After 15 seconds without a new file it switches to an error message with a Reload link instead of spinning forever.

A brush stroke across the middle follows progress, with “Loading” right under it. The number runs down the top edge (tategaki) in kanji numerals to match the ensō mark, in a Mincho font when the device has one (Yu Mincho, Hiragino Mincho, Noto Serif JP) and serif otherwise. The mark in the bottom corner is inked at the same pace and blooms at 100. No % sign: the numeral sets the rhythm, and the exact value goes through ARIA.

“Loading” is widely tracked and slowly fades in and out; Vietnamese pages show “Đang tải”. In RTL the stroke runs from the right and the number and mark swap sides. On failure, the message takes the label's place and the stroke stays where it stalled.

With reduced motion on (prefers-reduced-motion: reduce), the ink (stroke and mark) darkens in place instead of following the brush, “Loading” stays still, and the screen closes at once instead of fading. Progress is still shown in full; only the movement goes.

The screen is a role="progressbar" with an aria-label and an aria-valuenow in ordinary digits; the kanji numeral is aria-hidden because hearing “四十一” helps nobody. When done, the screen sets aria-hidden and leaves the DOM.

In dev, Vite's compile error overlay always sits above the loading screen. In Windows high contrast mode the screen uses system colors (Canvas, CanvasText).