Multiple layout in a route causes layout flash
Hi guys,
in the below image is the file structure of my route. The issue is when i am on any route wrapped by _mainLayout trying to route to a route wrapped by _infoLayout, i always get a flash of _mainLayout before _infoLayout will show up. Any idea of how i can fix this will. be appropriated. Thanks
25 Replies
conscious-sapphire•10mo ago
can you reproduce this in a minimal example?
ideally fork one of the existing stackblitz examples for this
fascinating-indigoOP•10mo ago
Chigoziem Nwaiwu
StackBlitz
Router Quickstart File Based Example (forked) - StackBlitz
Run official live example code for Router Quickstart File Based, created by Tanstack on StackBlitz
fascinating-indigoOP•10mo ago
Though i can't seems to reproduce it ... but it's happening right in my codebase
conscious-sapphire•10mo ago
can you share your whole codebase?
fascinating-indigoOP•10mo ago
Yeah, I can show you
is a private repo so i can't share it. But i can show you
optimistic-gold•10mo ago
Are you using code split? That flash is probably because you don’t have yet the js for the other layout loaded
Since it is lazy loaded
fascinating-indigoOP•10mo ago
Oooh YES, {"autoCodeSplitting": true}.
After disabling it, stopped flashing. Any fix for this? it totally defeats the benefits of CodeSplitting.
Thanks man
conscious-sapphire•10mo ago
when does that flash happen exactly?
how can I reproduce this?
fascinating-indigoOP•10mo ago
I added this file
tsr.config.json to my root folder to setup autoCodeSplitting, that's it.
Just as @Mihai Andrei explained, after the route changes, the current _layout remains until the new _layout is loaded, that's what is causing the layout flash.
Check here https://stackblitz.com/edit/tanstack-router-wryvvkja?file=src%2Froutes%2Fpatients%2F_mainLayout.tsxChigoziem Nwaiwu
StackBlitz
Router Quickstart File Based Example (forked) - StackBlitz
Run official live example code for Router Quickstart File Based, created by Tanstack on StackBlitz
fascinating-indigoOP•10mo ago
So is not flashing actually is just delay.
conscious-sapphire•10mo ago
so you are hitting this then? https://github.com/TanStack/router/issues/3556
GitHub
pending component is not shown when navigating to the route which d...
Which project does this relate to? Router Describe the bug Using file based routing when navigation to a new route which does not have beforeLoad or loader functions, pending component is not shown...
conscious-sapphire•10mo ago
can you share a video recording of what exactly is delayed?
like where you click, and what happens etc
fascinating-indigoOP•10mo ago
ok
fascinating-indigoOP•10mo ago
Jam
Jam | Console logs, network requests, and more
Click this link to see the video on changwen.localhost:3000, with console logs, network tab and device information.
fascinating-indigoOP•10mo ago
as you can see, it only happens on initial load
rare-sapphire•10mo ago
Interesting, just ran into this myself. Flipped
autoCodeSplitting: false and as expected, no more flash of content on navigation — a "main" bundle + code-splitting by route may be the move 🤔conscious-sapphire•10mo ago
still investigating that
rare-sapphire•10mo ago
Also, just a reminder, ya'll are legends and we appreciate you 🙏
optimistic-gold•10mo ago
I mean, I think it is expected right? The initial js does not contain the current route js because it was code splitted, so you see a flash. If you add a pending component in the root, you will see the loader instead of a flash
conscious-sapphire•10mo ago
yeah but the problem is, at least in https://github.com/TanStack/router/issues/3556 that the pending component is not shown
optimistic-gold•10mo ago
Oh…got it. I think in all of my pages I have a loader that uses “ensureQueryData” so I never faced it 😬
Sorry for intervening!
conscious-sapphire•10mo ago
no worries
fascinating-indigoOP•10mo ago
Guys, any update on this?
conscious-sapphire•10mo ago
nope
many things ongoing in parallel
fascinating-indigoOP•10mo ago
Is fine, i can relate.