Default value flashes until the one from localStorage is read
MrAmericanMike opened this issue · comments
Here there is an example: https://www.sveltelab.dev/du47ba5fcopc0kz?files=.%2Fsrc%2Froutes%2F%2Bpage.svelte
The default is a "Default message"
Type something different on the input and then refresh. You will see "Default message" show for a moment as it updates with the stored value.
Isn't there a fix for this?
Should we not have defaults and account for the moment where the data may not exist? I can see this behavior causing issues.
My guess is that this is fixed by passing undefined to the call to internal() (which is an alias for Svelte's writable() store function) here.
However, it looks like the project is abandoned.
However, it looks like the project is abandoned.
That isn't true.
I have been bikepacking the past month and I do not have my laptop with me. I will review issues when I have some time.
There are PR's from dependabot older than a month, but never mind that. The important thing is that there's hope once more. :-) Thanks! I personally would like to see a few things done before I can use it at work, so this brings joy to my overworked behind, hehe.
Thanks for the answers. As for now I'm leaving defaults as empty and will see if I need to pay special attention to some edge case.
@joshnuss Enjoy the trip, hope you are having fun ;)
Thanks @MrAmericanMike,
Can I ask, is this flash happening in SvelteKit? In SvelteKit, server side rendering cannot make use of local storage, so it renders the initial value.
Thanks @MrAmericanMike,
Can I ask, is this flash happening in SvelteKit? In SvelteKit, server side rendering cannot make use of local storage, so it renders the initial value.
It happens in SvelteKit while in development with the adapter-auto. Haven't investigated much further, but will do some tests with Svelte alone and with SvelteKit once the site is built (Even with adapter-static, to see how it goes).
So yes, after more testing, looks like it only happens on SvelteKit with using vite dev It doesn't happen on the built version using the adapter-auto (Didn't test the adapter-static but I assume it wouldn't be an issue)
Also tested in Svelte and it doesn't happen at all.
PS: In the image we can see that in the console the value is the "correct" (or expected) but for some reason, visually upon reload we see "Default message" on the client side.
I'm guessing for some reason during dev mode in SvelteKit they are "leaking" thr server side rendered version until in client side where it gets the actual value from localStorage.
I have no idea if it's something that could be fixed, or if it's just something to be aware of during development and in case the app will render server side (This been an obvious case to be aware of)
But it doesn't happen in the built version, so unless you think there is a fix or something that can be done, feel free to close the issue.
Thanks a lot.
I see. It is likely due to server-side rendering.
On the server, local storage is not available, so it always renders the initial value.
Then during re-hydration (in the browser) it loads from local storage. Thus, a flash is caused by the changing value.
The solution is to disable SSR for components that rely on local storage. Just add to your +page.js:
export const ssr = falseI'll close the issue, since it's the expected behavior.
I'll add a note to the readme.
I see. It is likely due to server-side rendering.
On the server, local storage is not available, so it always renders the initial value. Then during re-hydration (in the browser) it loads from local storage. Thus, a flash is caused by the changing value.
The solution is to disable SSR for components that rely on local storage. Just add to your
+page.js:export const ssr = false
Yes having this does the trick. Thanks so much.
Awesome! Glad it's figured out