SVELTE how to fix page flicker
You pasted the code for Landing.svelte
, but looking at the deployed site, I can see the bug is located in App.svelte
.
In the onMount
method of App.svelte
, you call getAllClients()
, which returns a Promise. After that Promise resolves, animateNav
and showNav
have new values assigned to them.
You should introduce a loading variable to hide all content until the async calls that you need to make fully resolve. See how I reproduced the issue and solved it here.
The page appears to flicker because of how quickly the Promise resolves—use setTimeout
to see the flicker take longer.