other-emerald

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

adverse-sapphire•7mo ago

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

other-emeraldOP•7mo 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

adverse-sapphire•7mo ago

do you have a setup where this can be reproduced?

other-emeraldOP•7mo 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

adverse-sapphire•7mo ago

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

other-emeraldOP•7mo 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

adverse-sapphire•7mo ago

so router devtools show the match is pending?

other-emeraldOP•7mo ago

Yes, exactly

other-emeraldOP•7mo 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.

other-emeraldOP•7mo 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

adverse-sapphire•7mo ago

so what did you configure as defaultPendingMs / pendingMs ?

other-emeraldOP•7mo ago

0 and 0 Also tried with 1 and 1

adverse-sapphire•7mo ago

and this happens with one of our examples as well?

other-emeraldOP•7mo ago

I will try, give me a sec

adverse-sapphire•7mo ago

probably need to disable link preloading

other-emeraldOP•7mo ago

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

other-emeraldOP•7mo 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

other-emeraldOP•7mo 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?

other-emeraldOP•7mo 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.

adverse-sapphire•7mo ago

when you navigate the second time, what happens?

other-emeraldOP•7mo 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...

adverse-sapphire•7mo 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

other-emeraldOP•7mo 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

other-emeraldOP•7mo 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.

other-emeraldOP•7mo 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?

adverse-sapphire•7mo ago

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

other-emeraldOP•7mo 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 😅 🤣

adverse-sapphire•7mo ago

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

other-emeraldOP•7mo 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

adverse-sapphire•7mo ago

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

other-emeraldOP•7mo ago

Adding

beforeLoad: () => {},

beforeLoad: () => {},

Also fixes the issue

adverse-sapphire•7mo 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

other-emeraldOP•7mo 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

other-emeraldOP•7mo 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 ...

other-emeraldOP•7mo 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?