Lazy Loading make a blank page when component change
Hi,
I have an issue with Lazy Loading for solid-start.
Actually, I have implement a switch component with lazy loading enabled but when I change a component (who is lazy loaded), the page become blank during less than 1 seconds...
Can someone can help me ?
It's reproducible with builded repo :
pnpm build && node .output/server/index.mjs
Repro : https://github.com/qlaffont/test-lazy14 Replies
The link to your github repo 404s, you might've set it to private accidentally?
yes my bad !
now it is public 🙂
The flicker is the lazy loaded routes having to lazy load. You can wrap the signal updates in startTransition to delay the page from updating until the root suspense is resolved
Do you have any example where I can take inspiration ?
Because the strange thing is the parent comparent rerender but it is only the children who need to rerender and who is lazy loaded
To explain, normally the background should not go to blank
The components lazy loading causes the nearest suspense boundary to suspend
In this case the nearest boundary is at the root, so everything is being removed while the component loads
startTransition(() => setSignal()) should do what you want
The thing to think about here is what is supposed to render while the component lazy loads? The answer is the nearest suspense fallbackI don't see a StartTransition on the documentation can you explain more on how to do it or can you make a commit on the repro please ?
i looked at ur repo
wrap the but they more like escape-hatches
tutorial of
<switch/> in DisplaySteps with a <Suspense/>
The thing to think about here is what is supposed to render while the component lazy loads? The answer is the nearest suspense fallbackthis is the crucial idea behind Suspense u can use
useTransition and startTransition too, useTransitions explains its usecase nicely: https://www.solidjs.com/tutorial/async_transitions
and startTransition is like useTransition but without pending state: https://www.solidjs.com/docs/latest/api#starttransitionjust for your information the link doesn't exist
i should probably link to the new docs:
https://docs.solidjs.com/reference/reactive-utilities/start-transition
Thanks for your help @Brendonovich & @bigmistqke I close the post
I reopen the post In my repro the bug is still present I will check if I know why and if not I will ask if someone is available to check my private repro in visio or to give limited access
I can't reproduce it with my repro but on my private repro I have the error.
@bigmistqke / @Brendonovich If you have 5 min It will be cool please 🙂
As you the content is loaded and disapear automatically ...
Output is static
Nothing in DOM 0-o
found nevermind