#Navigating to link shows previous page while fetching new page.

56 messages · Page 1 of 1 (latest)

graceful flax
#

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?

atomic wraith
#

reduce that number to get the pending component earlier

graceful flax
#

@atomic wraith 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

atomic wraith
#

do you have a setup where this can be reproduced?

graceful flax
#

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

atomic wraith
#

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

graceful flax
#

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

atomic wraith
#

so router devtools show the match is pending?

graceful flax
#

Yes, exactly

#

Quick 30 seconds reproduction @atomic wraith

#

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

atomic wraith
#

so what did you configure as defaultPendingMs / pendingMs ?

graceful flax
#

0 and 0

#

Also tried with 1 and 1

atomic wraith
#

and this happens with one of our examples as well?

graceful flax
#

I will try, give me a sec

atomic wraith
#

probably need to disable link preloading

graceful flax
#

Is it enabled by default?

graceful flax
#

Yeah, got you, need to disable link preload in the example

#

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?

atomic wraith
#

when you navigate the second time, what happens?

graceful flax
#

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

graceful flax
#

Sorry man, in the example when I put

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

atomic wraith
#

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

graceful flax
#

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
})
  1. In chrome browser select throttling 1kb 4s latency
#

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: () => {},
})

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?

atomic wraith
#

sounds like it, yes

#

can you please create a GitHub issue including the example you modified so we can debug this easier?

graceful flax
#

@atomic wraith 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 😅 🤣

atomic wraith
#

as a workaround, yes

#

but we need to fix this in router

#

btw does it matter whether

  • beforeLoad exists?
  • loader is async?
graceful flax
#

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

atomic wraith
graceful flax
#

Adding

beforeLoad: () => {},

Also fixes the issue

atomic wraith
#

really . ... surprising

#

add all that to the GitHub issue please

atomic wraith
graceful flax
#

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

graceful flax