Load theme in a blocking way to prevent FOUC
- Dominant language
- TypeScript
- Stars
- 2
- Forks
- 0
- PR merge metrics
- No merged PRs in 30d
Description
The current CSS theme loader is loaded normally through svelte. Svelte is by default asynchronous to improve performance. Unfortunately this means that the browser will serve our website completely unstyled for half a second before the CSS loader is finished and applies the correct CSS variables (also called Flash Of Unstyled Content - FOUC).
This is at best a little annoying and makes the page seem janky, and at worst really jarring, for example if you sit in a dark room and have dark mode enabled, but the page briefly renders with a white background.
We should find a way to compile and inject the loader as a synchronous module, which means the browser will wait for the script to run before displaying the page. This is probably achieved by making a form of custom vite plugin.
Contributor guide
Assessment
This issue has not been assessed yet.