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
fascinating-indigo•6mo ago
cc @brenelz @Birk Skyum
optimistic-gold•6mo ago
Can you try wrapping <Outlet /> in the
__root.tsx with Suspense? I think that would fix it. If so, we can update the examplefascinating-indigo•6mo ago
why would that be required? is this still that bug with the lazy loaded modules?
optimistic-gold•6mo 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
stormy-goldOP•6mo 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.stormy-gold•6mo ago
Im having the same problem,
autoCodeSplititng to false also fixed the flickering, im also seeing this warnings
optimistic-gold•6mo ago
Instead of turning code splitting off does adding the suspense around outlet work?
stormy-gold•6mo 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.
stormy-gold•6mo 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 flickeringstormy-gold•6mo ago
stormy-gold•6mo 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...
optimistic-gold•6mo ago
I think I have a fix up. Can you try installing this version:
stormy-gold•6mo ago
Works perfectly !!!
stormy-gold•6mo ago
i still have this warning, don't know if could be also related
stormy-gold•6mo ago
the warnings did not start on
1.111.13stormy-goldOP•6mo ago
Hi, just wondering why the Kitchen Sink example doesn't seem to flicker although the Outlet isn't wrapped by Suspense ?