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
harsh-harlequin•7mo ago
can you reproduce this in a minimal example?
ideally fork one of the existing stackblitz examples for this
deep-jadeOP•7mo 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
deep-jadeOP•7mo ago
Though i can't seems to reproduce it ... but it's happening right in my codebase
harsh-harlequin•7mo ago
can you share your whole codebase?
deep-jadeOP•7mo ago
Yeah, I can show you
is a private repo so i can't share it. But i can show you
deep-jade•7mo 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
deep-jadeOP•7mo ago
Oooh YES, {"autoCodeSplitting": true}.
After disabling it, stopped flashing. Any fix for this? it totally defeats the benefits of CodeSplitting.
Thanks man
harsh-harlequin•7mo ago
when does that flash happen exactly?
how can I reproduce this?
deep-jadeOP•7mo 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
deep-jadeOP•7mo ago
So is not flashing actually is just delay.
harsh-harlequin•7mo 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...
harsh-harlequin•7mo ago
can you share a video recording of what exactly is delayed?
like where you click, and what happens etc
deep-jadeOP•7mo ago
ok
deep-jadeOP•7mo 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.
deep-jadeOP•7mo ago
as you can see, it only happens on initial load
absent-sapphire•7mo 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 🤔harsh-harlequin•7mo ago
still investigating that
absent-sapphire•7mo ago
Also, just a reminder, ya'll are legends and we appreciate you 🙏
deep-jade•7mo 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
harsh-harlequin•7mo ago
yeah but the problem is, at least in https://github.com/TanStack/router/issues/3556 that the pending component is not shown
deep-jade•7mo 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!
harsh-harlequin•7mo ago
no worries
deep-jadeOP•7mo ago
Guys, any update on this?
harsh-harlequin•7mo ago
nope
many things ongoing in parallel
deep-jadeOP•7mo ago
Is fine, i can relate.