Ecdar / Ecdar/Ecdar-GUI-Web

Load theme in a blocking way to prevent FOUC

Open
#147 0 comments 0 reactions 0 assignees View on GitHub
enhancement
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.