Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Load theme in a blocking way to prevent FOUC #147

Open
atjn opened this issue Dec 1, 2023 · 0 comments
Open

Load theme in a blocking way to prevent FOUC #147

atjn opened this issue Dec 1, 2023 · 0 comments
Labels
enhancement New feature or request

Comments

@atjn
Copy link
Collaborator

atjn commented Dec 1, 2023

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.

@atjn atjn added the enhancement New feature or request label Dec 1, 2023
@github-project-automation github-project-automation bot moved this to Product Backlog in Scrum Board Group 3 Dec 1, 2023
@atjn atjn changed the title Load theme blocking to prevent FOUC Load theme in a blocking way to prevent FOUC Dec 1, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant