Blank page if route is not loaded yet
Hi. I got an issue in my app.
When I click on a link to navigate on a route that is not loaded, it leaves me with a blank page, and when the route is finally loaded, the page is not showing : It stay blank.
If I let the route load. I.E: by placing my cursor over a link that has preload: intent. The page shows immediatly after clicking on it, without showing any blank page.
Thank you for your help !
13 Replies
itchy-amethyst•17mo ago
can you show a reproduction by forking one of the examples please?
extended-salmonOP•17mo ago
It's hard to reproduce. I got a huge project that contains some issues with the router. I think it's better if I share you my project so you could notice the issues
itchy-amethyst•17mo ago
sorry but large projects usually have other influences that are not part of one specific open source project. I can take a look if you can take the time to trim it down to a minimal repro 🙂
extended-salmonOP•16mo ago
Finally found the time to do a minimal repro: https://stackblitz.com/edit/vitejs-vite-sb9dg1?file=src%2Frouter.tsx
The bug wont happen if you don't restrict your connection I.E to "slow 3g" and, as I know, it's not possible to do it for a preview on a StackBlitz, so you'll probably need to clone the project and launch it on localhost.
As I said, you'll need to restrict your connection to slow 3g so the intent preload wouldn't have the time to load the lazy file before you click on it (I guess it is the issue).
The issue happens in my real project with a normal connection because my routes are way bigger, and the bug does not happen if you let the "intent" trigger for like 1 second or if the route is already in cache.
Other thing, I noticed that the bug is not happening if the route has no loader, that's why there is empty loader functions in them. If you remove them, the bug wont happen.
There is a gif to show you the bug. As you can see, if I click on a link to go on another route that is not already loaded, it does not show the new route component at all.
https://gyazo.com/ada043a794530f4d4c044512523b18f1
Hope you could fix this. And thanks for your work.
Maquinours
StackBlitz
tanstack-router-bug-reproducer - StackBlitz
Next generation frontend tooling. It's fast!
Gyazo
Gyazo Screen Video
extended-salmonOP•16mo ago
Any news @TkDodo 🔮 ?
itchy-amethyst•16mo ago
I opened it in a new tab in stackblitz, turned to slow 3g but couldn't reproduce there either
https://vitejsvitesb9dg1-eb02--5173--e2372e97.local-credentialless.webcontainer.io/app/products
extended-salmonOP•16mo ago
Yep, as I noticed, restricting connection in stackblitz does not work
itchy-amethyst•16mo ago
yeah could reproduce once downloaded. seems like a legit issue related to prefetching. removing
defaultPreload: 'intent' also makes it work. Can you file an issue please?extended-salmonOP•16mo ago
Yes, I also noticed that it was working well without preload.
Okay !
foreign-sapphire•15mo ago
@Maqui I think we stumbled across this issue today as well, has there been created an issue already and is there any update on this issue?
extended-salmonOP•15mo ago
Hi. I created an issue but I don't think we've got a fix yet. To be honest, I'm not using intent anymore to avoid this issue
foreign-sapphire•15mo ago
Can you link the issue? I would like to subscribe so I can keep track of any updates..
I guess for now we will also remove the intent setting, it works fine for us without it
probable-pink•15mo ago
I guess the issue is https://github.com/TanStack/router/issues/1534 (https://github.com/TanStack/router/issues/1638 seems to be the same issue) this one? I'm facing this on my app as well, but I haven't had time to try and take a stab at this. But yeah, removing intent preloading seems to fix this.