Flickering when navigating using Link
Hi guys! I was trying out Tanstack Router examples for SolidJS:
1. https://tanstack.com/router/latest/docs/framework/solid/examples/basic-solid-query-file-based
2. https://tanstack.com/router/latest/docs/framework/solid/examples/kitchen-sink-file-based
I wonder why when navigating pages in example 1 the entire page seems to be flickering but it does not happen in example 2. Can anyone give me explanation ? thanks!
Solid TanStack Router Basic Solid Query File Based Example | TanSta...
An example showing how to implement Basic Solid Query File Based in Solid using TanStack Router.
Solid TanStack Router Kitchen Sink File Based Example | TanStack Ro...
An example showing how to implement Kitchen Sink File Based in Solid using TanStack Router.
16 Replies
stormy-gold•9mo ago
cc @brenelz @Birk Skyum
conscious-sapphire•9mo ago
Can you try wrapping <Outlet /> in the
__root.tsx with Suspense? I think that would fix it. If so, we can update the examplestormy-gold•9mo ago
why would that be required? is this still that bug with the lazy loaded modules?
conscious-sapphire•9mo ago
I think its just a difference in how Solid's resources work when there is no explicit Suspense boundary
Like it treats it like there is one empty Suspense boundary around everything, so then its falling back to an empty page which causes the flicker
eager-peachOP•9mo ago
Hi thank you ,tried adding it into my personal project, it worked. I also tried to set
autoCodeSplititng to false in vite.config.ts and the flicker gone.extended-salmon•9mo ago
Im having the same problem,
autoCodeSplititng to false also fixed the flickering, im also seeing this warnings
conscious-sapphire•9mo ago
Instead of turning code splitting off does adding the suspense around outlet work?
extended-salmon•9mo ago
Not completely, it's like it fixes some of the behaviour and i also would need to add a suspense every time i have a navigation level.
extended-salmon•9mo ago
Also, this started happening when i went from
"@tanstack/solid-router": "^1.111.3" to "@tanstack/solid-router": "^1.114.23" prior to that i had no warnings nor any flickeringextended-salmon•9mo ago
extended-salmon•9mo ago
@brenelz just tracked down when the flicker started, it began happening in
1.111.13 https://github.com/TanStack/router/releases/tag/v1.111.13GitHub
Release v1.111.13 · TanStack/router
Version 1.111.13 - 2/27/25, 1:35 PM
Changes
Fix
solid-router: properly load components on lazy routes (#3589) (e1b5f07) by @XiNiHa
solid-router: use createResource and Show in Await (#3591) (87d1d...
conscious-sapphire•9mo ago
I think I have a fix up. Can you try installing this version:
extended-salmon•9mo ago
Works perfectly !!!
extended-salmon•9mo ago
i still have this warning, don't know if could be also related
extended-salmon•9mo ago
the warnings did not start on
1.111.13eager-peachOP•9mo ago
Hi, just wondering why the Kitchen Sink example doesn't seem to flicker although the Outlet isn't wrapped by Suspense ?