A single-page app has an awkward gap on first load, the browser has the HTML but the JavaScript bundle has not parsed yet, so there is nothing on screen. On a heavier app with a large payload to preload that gap is long enough to look broken. Cover loading fills it, in two layers that hand off to each other.
The first layer paints before the bundle even runs. A small chunk of markup, init-cover.html, holds a centered logo, an inline style, and an inline script. A Vite plugin injects it into index.html at build time by replacing an <!-- init-cover --> token, so it ships inside the served HTML with no dependency on the app code.
The inline script matters as much as the logo. It reads the stored color scheme and sets the dark class immediately, so the very first paint is already the right theme and there is no flash before the app takes over. Once the app mounts it calls removeInitCover to tear the shell back out.
Because it is hard-coded HTML rather than a component, treat it as the thing you edit to match your own initial loading screen. It is intentionally the one bit of the boot path that does not go through the app.
Once the bundle is running the second layer takes over. CoverLoading is a normal component sitting behind the site load-state, so it stays up while the critical boot work resolves, the auth check, settings, the first locale files, and fades out once site is ready. This is the same tier the site transition gates on, so the cover and the first real content are two sides of one switch.
There are also Maintenance and Update covers for the two app-level interrupts, shown in place of the normal boot flow when the app signals it is down for maintenance or needs a reload after a deploy.
Transitions for the site tier the in-app cover rides on. Dark Mode for the scheme the pre-mount script resolves.