extended-salmon

Navigating to link shows previous page while fetching new page.

I use tanstack router with file based routing and auto code splitting. When i navigate to a new page using a tanstack Link then for some time i still see the content of my current page even though url bar is updated to new page url. I see current page until data for that new route page is fetched. Is that a bug and why is that happening? How can i change it to see loading pending component instead current page while loading js for my new page?

35 Replies

stormy-gold•10mo ago

checkout https://tanstack.com/router/latest/docs/framework/react/api/router/RouteOptionsType#pendingms-property reduce that number to get the pending component earlier

extended-salmonOP•10mo ago

@Manuel Schiller I already tried that. Unfortunately did not help... Also tried to wrap with suspense every layer of my react app, and using wrapInSuspense in createFileRoute function did not help either 😦 It is specifically when loading js bundle for page which i am trying to navigate. So when using React.lazy manually and wrapping with Suspense - eerything works fine. But I wanted to use auto code splitting

stormy-gold•10mo ago

do you have a setup where this can be reproduced?

extended-salmonOP•10mo ago

I will create an issue in the repo with stack blitz reproduction. Just thought maybe it is known thing need few mins to create repro

stormy-gold•10mo ago

when a route is loaded, it is put into pending state until route component was loaded and the loader finished

extended-salmonOP•10mo ago

basically just putting network throttle in chrome to Slow 4g is a reproduction When network is quick it is hard to spot Yeah and my problem that while it is in pending state - the pending component is not shown

stormy-gold•10mo ago

so router devtools show the match is pending?

extended-salmonOP•10mo ago

Yes, exactly

extended-salmonOP•10mo ago

https://vimeo.com/1059892901/1a0c7ea1b0

Valerii Petryniak

Vimeo

tanstack-router-issue

This is "tanstack-router-issue" by Valerii Petryniak on Vimeo, the home for high quality videos and the people who love them.

extended-salmonOP•10mo ago

Quick 30 seconds reproduction @Manuel Schiller So you see url bar was changed to /plants but still content of previous page was shown while js bundle for plant route was fetching

stormy-gold•10mo ago

so what did you configure as defaultPendingMs / pendingMs ?

extended-salmonOP•10mo ago

0 and 0 Also tried with 1 and 1

stormy-gold•10mo ago

and this happens with one of our examples as well?

extended-salmonOP•10mo ago

I will try, give me a sec

stormy-gold•10mo ago

probably need to disable link preloading

extended-salmonOP•10mo ago

Is it enabled by default? Yeah, got you, need to disable link preload in the example

extended-salmonOP•10mo ago

Yeas it happens with this example(https://github.com/TanStack/router/tree/main/examples/react/basic-file-based) which I just tested.

GitHub

router/examples/react/basic-file-based at main · TanStack/router

🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - TanStack/router

extended-salmonOP•10mo ago

A bit more difficult to notice because bundle for /posts page is very small. So needed to put chrome throttling to 3G In a minute will send video of repro with that example. Can I do anything else?

extended-salmonOP•10mo ago

https://vimeo.com/1059901083/1e097bda29

Valerii Petryniak

Vimeo

tanstack-router-example-repro

This is "tanstack-router-example-repro" by Valerii Petryniak on Vimeo, the home for high quality videos and the people who love them.

stormy-gold•10mo ago

when you navigate the second time, what happens?

extended-salmonOP•10mo ago

The second time is instant. Logically because route js bundle is already fetched in the browser in the last video I sent check the 18 to 20 second timestamps. Basically for more than 1 second pending component Loading... is not shown while url is updated It is 1 second becuase bundle size is very small of that page js Sorry man, in the example when I put

defaultPendingMs: 0,
defaultPendingMinMs: 0

defaultPendingMs: 0,
defaultPendingMinMs: 0

It started to show loading component instantly. Do not understand why in my app if I set it it does not help...

stormy-gold•10mo ago

that's what I would expect so please try to either strip down your code by removing code until it works or add stuff to the example until it breaks

extended-salmonOP•10mo ago

Okay finally I was able to reproduce it with basic-file-based example. All I needed to do is: 1. delete src/routes/posts.tsx file 2. Update router instance config:

// Set up a Router instance
const router = createRouter({
  routeTree,
  // defaultPreload: 'intent',
  defaultStaleTime: 5000,
  scrollRestoration: true,
  defaultPendingComponent: () => <div>Loading...</div>,
  defaultPendingMs: 0,
  defaultPendingMinMs: 0
})

// Set up a Router instance
const router = createRouter({
  routeTree,
  // defaultPreload: 'intent',
  defaultStaleTime: 5000,
  scrollRestoration: true,
  defaultPendingComponent: () => <div>Loading...</div>,
  defaultPendingMs: 0,
  defaultPendingMinMs: 0
})

3. In chrome browser select throttling 1kb 4s latency

extended-salmonOP•10mo ago

https://vimeo.com/1059916543/32942fbde4

Valerii Petryniak

Vimeo

tanstack-example-bug

This is "tanstack-example-bug" by Valerii Petryniak on Vimeo, the home for high quality videos and the people who love them.

extended-salmonOP•10mo ago

In chrome it is needed to add custom throttling profile and chose 1kb for download/upload and 4000ms latency. And I just found a fix for it. In this particular case all what is needed is to add src/routes/posts.tsx file back with this content

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/posts')({
  loader: () => {},
})

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/posts')({
  loader: () => {},
})

Specifically loader function is needed. And then it works fine. Without loader function pending component is not shown until page bundle is fetched. It is a bug in router itself, right?

stormy-gold•10mo ago

sounds like it, yes can you please create a GitHub issue including the example you modified so we can debug this easier?

extended-salmonOP•10mo ago

@Manuel Schiller thanks for the help and suggestions! I guess I just need to add these layout components with loader function to all my routes and it should work fine. Was quite tricky to reproduce this nasty thing 😅 🤣

stormy-gold•10mo ago

as a workaround, yes but we need to fix this in router btw does it matter whether - beforeLoad exists? - loader is async?

extended-salmonOP•10mo ago

Should I create a separate repo reproduction based on that example? Or maybe just better to describe reproduction steps and attach video since it is just one file to delte to have a repro loader just needs to exist as a function, does not matter async or not

stormy-gold•10mo ago

just fork the router repo , apply your changes and create a PR with the description "reproducer for #..."

extended-salmonOP•10mo ago

Adding

beforeLoad: () => {},

beforeLoad: () => {},

Also fixes the issue

stormy-gold•10mo ago

really . ... surprising add all that to the GitHub issue please I have a hunch. these methods being present makes the match pending by default

extended-salmonOP•10mo ago

This separate posts.tsx file not even needed to fix the issue. Enough just add beforeLoad: () => {}, or loader: () => {} to the posts.index.tsx route config file and it will also fix the issue

extended-salmonOP•10mo ago

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 ...

extended-salmonOP•10mo ago

Updated the issue. The best and easiest way to solve it is to add loader to the __route.tsx file

Gaming

Programming

Navigating to link shows previous page while fetching new page.

Did you find this page helpful?