Lazy loaded components not showing fallback UI

[jude-sonic]

Hi,

I’m implementing lazy loading with TanStack Router in my React application. I’m facing an issue with a small delay in rendering the component after the URL gets updated. Ideally, the URL should update immediately, and while the new component is loading, a pendingComponent should be displayed. However, in my case, the pendingComponent only shows up on the first page load. For subsequent navigations, the URL updates but there is a small delay in rendering the new component, and during this time, the old component remains visible.

Here, I donot have a loader for the component, and I have tried adding preload settings as well. But still no effect. Even if after adding a loader to the component, it shows only after the delay I mentioned. So basically, I am not seeing any fallback UI here. I should supposedly see the pending component right?

Router Setup

Here is my router setup:

export const router = createRouter({
  context: {
    queryClient,
  },
  defaultNotFoundComponent: () => (
    <div>
      <p>Oops, not found! Haha..🤷‍♂️ 👨🏻‍💻</p>
    </div>
  ),
  defaultPendingComponent: () => <Text>Loading...</Text>,
  routeTree,
});

Lazy loading router

export const Route = createFileRoute('/create/')({
  validateSearch: (search: Record<string, unknown>): SearchParams => ({
    draft: (search.draft as string) || 'new',
  }),
});

export const Route = createLazyFileRoute('/create/')({
  component: () => (  
      <Component />
  ),
});

•    On first page load, the pendingComponent shows up correctly.
•    For subsequent navigations, the URL updates, but there is a small delay before the new component is rendered. During this time, the old component remains visible instead of showing the pendingComponent.

Is there any way to ensure that the pendingComponent is displayed until the new component is fully loaded for every navigation?

Originally posted by @jude-sonic in https://github.com/TanStack/router/discussions/2311

[barmaglot92]

any news? also have this issue on v1.58.15 createLazyFileRoute or {autoCodeSplitting: true} doesn't matter

[schiller-manuel]

@barmaglot92 I fixed one issue in https://github.com/TanStack/router/releases/tag/v1.70.0 if you still experience the problem in that version, please provide a complete minimal example (e.g. by forking one of the existing router examples on stackblitz)

[jude-sonic]

@barmaglot92 I fixed one issue in https://github.com/TanStack/router/releases/tag/v1.70.0 if you still experience the problem in that version, please provide a complete minimal example (e.g. by forking one of the existing router examples on stackblitz)

Sure, let me check with the latest and if not fixed, will provide a minimal example

[jude-sonic]

@schiller-manuel I just tested with the latest version (v1.70.0) and seems like the issue still exists. I am working on SPA and no SSR. Basically is the component size is small, there is no significant delay. But as the page/ component size increases, more the delay.

What I have observed is that,

• once we click on the Link, the url updates to the new nav, but their is delay in rendering the component.
• when I checked on devtools, once the navigation updates, after a delay only the routing status changes to pending and the to idle, once rendered.

Is there any solutions that you recommend, since my page/ component size increases, it significantly affects the UX.

Here is a small reproduction:

Here I have 2 routes, /heavy-component which is a lazy loaded component and /heavy-component-nolazy. Both are just rendering a large list. So if you navigate to those routes, you can see the delay. Even with the post component, we can see the delay initially, and also inside post, if you select post, few posts have the delay.

https://stackblitz.com/edit/tanstack-router-v3pr2v?file=src%2Froutes%2Fheavy-component.lazy.tsx,src%2Froutes%2F__root.tsx,src%2Froutes%2Fheavy-component-nolazy.tsx&preset=node

[nstepien]

In the createRouter config, try setting

  defaultPendingComponent: () => 'loading...',
  defaultPendingMinMs: 0,
  defaultPendingMs: 0,

[jude-sonic]

defaultPendingComponent: () => 'loading...', defaultPendingMinMs: 0, defaultPendingMs: 0,

I have tried that, it does not solve the problem completely. It although reduces the delay, but we still have a small delay.

[schiller-manuel]

@jude-sonic I just tried your example, both "heavy" routes seem to have the same delay. So I don't see how "lazy" has any influence here. Can you please share a screen recording of what you mean?

https://github.com/user-attachments/assets/daca1f7b-632e-495d-8493-0a053965f62e

[barmaglot92]

@schiller-manuel

https://stackblitz.com/edit/tanstack-router-zjd5ly?file=src%2Froutes%2Flazy-route.lazy.tsx

"@tanstack/react-router": "1.78.2",

here represents lazy route doesn't show defaultPendingComponent when navigate to it, but defaultPendingComponent showed if opening lazy route straight

[jude-sonic]

@jude-sonic I just tried your example, both "heavy" routes seem to have the same delay. So I don't see how "lazy" has any influence here. Can you please share a screen recording of what you mean?

Screen.Recording.2024-10-26.at.23.32.22.mov

Sorry for the delay in response. Actually yes, lazy does not have any influence here. The issue I am facing here is that when you navigate to a route, there is a delay visible from the moment the url gets updated and the page gets loaded. (same like in your video). First the url gets updated and after few milli seconds or seconds the page is loaded (depending on the size of the page). As the component gets heavy, more the delay. I just wanted to know if I am missing any cofigurations here.

And also I tried adding defaultPendingComponent, but as @barmaglot92 pointed, it shows only on initial app load, and not on the route change. While we have this delay, is it possible to show the fallback UI?

[moeabdol]

In the createRouter config, try setting

defaultPendingComponent: () => 'loading...', defaultPendingMinMs: 0, defaultPendingMs: 0,

This solved the problem for me. Thanks.

[barmaglot92]

@moeabdol could you demostrate please?

[burnmaniac]

@schiller-manuel

https://stackblitz.com/edit/tanstack-router-zjd5ly?file=src%2Froutes%2Flazy-route.lazy.tsx

"@tanstack/react-router": "1.78.2",

here represents lazy route doesn't show defaultPendingComponent when navigate to it, but defaultPendingComponent showed if opening lazy route straight

I can reproduce this issue in my React app, also SPA with no SSR.

On this StackBlitz, if you open the developer tools, slow down the network to Slow 4G or 3G, then click on "Lazy", you can see that the delay is not coming from the defaultPendingMs or defaultPendingMinMs, but it takes 4-5 seconds to see the component.

While waiting, the pending component is not displayed. It just hangs on the current route while the chunks are being downloaded.

I've also tested the latest version (1.95.1) a few minutes ago, and it happens on this version too.

We can see Loading... on initial load, but not on subsequent navigation.

[deivisonrpg]

Same thing here, the defaultPendingComponent only works on the first navigation.

To test it, create 2 routes with 2 very large components (create a giant lipsum), and reduce the navigation speed using the developer tools.

[deivisonrpg]

Solution for this in: https://github.com/TanStack/router/issues/3556

[schiller-manuel]

fixed in https://github.com/TanStack/router/releases/tag/v1.117.1