quickest-silver

Delay in loading component with tanstack lazy loading

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. 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,
});

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 = createFileRoute('/create/')({
  validateSearch: (search: Record<string, unknown>): SearchParams => ({
    draft: (search.draft as string) || 'new',
  }),
});

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

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?

6 Replies

extended-salmon•14mo ago

This is probably because you don't have any loaders running on the route. When you first load the page, you have absolutely nothing to display (e.g previous UI) so the defaultPendingComponent is shown. However, after the page has loaded in, you now have a "previous" state. So when you call navigate to this route with lazy route content, it kicks of the loader stage of the route. This stage, runs both the route loader fn and starts the process of lazily importing the route components that are required. If your pendingComponent is defined in the createLazyFileRoute function, then this is being imported at this stage. Once the lazy components have been loaded in, it then has to decided if that route has a pendingComponent among the lazily imported components or whether it needs to use whatever is defined as the defaultPendingComponent on the router. Its regardless of whether the route loader is still running or already resolved, its only at this stage (after the lazy components have been loaded in), can the router start to show pending ui. If the router were to show the defaultPendingComponent immediately and then receive a pendingComponent from the lazy it'll cause a layout shift and can be quite jarring. In your example above, since you don't have a loader defined on the route, on click, the router needs to load in the lazy components.

extended-salmon•14mo ago

You can use the preload setting on the router on eagerly begin route preloading. https://tanstack.com/router/latest/docs/framework/react/api/router/RouterOptionsType#defaultpreload-property You can also set this property on the any of your rendered <Link> components.

RouterOptions | TanStack Router React Docs

The RouterOptions type contains all of the options that can be used to configure a router instance. RouterOptions properties

extended-salmon•14mo ago

Here's the documentation on preloading in TanStack Router. https://tanstack.com/router/latest/docs/framework/react/guide/preloading

Preloading | TanStack Router React Docs

Preloading in TanStack Router is a way to load a route before the user actually navigates to it. This is useful for routes that are likely to be visited by the user next. For example, if you have a list of posts and the user is likely to click on one of them, you can preload the post route so that it's ready to go when the user clicks on it. S...

quickest-silverOP•13mo ago

@Sean Cassiere Sorry for the late response. Thanks for the suggestion! I’ve tried adding the preload option both at the router and Link level, but unfortunately, I’m still experiencing the delay. The pendingComponent shows up correctly on the initial page load, but during subsequent navigations, the URL updates, and there’s a noticeable lag before the new component renders. The previous component stays visible until the new one loads in, and the pendingComponent is not displayed in this window of time. I’ve confirmed that the lazy-loaded component is being preloaded, but it doesn’t seem to affect the rendering delay. Any further thoughts on what might be causing this or how to ensure the pendingComponent appears while waiting for the new component to load? Thanks in advance! I tried adding a loader to the component,

export const Route = createFileRoute('/lbp/create/')({
  loader: () => new Promise((resolve) => setTimeout(resolve, 2000)),
  pendingComponent: () => <Text>Loading create...</Text>,
  validateSearch: (search: Record<string, unknown>): TokensSearch => ({
    draft: (search.draft as string) ?? 'new',
  }),
});

export const Route = createFileRoute('/lbp/create/')({
  loader: () => new Promise((resolve) => setTimeout(resolve, 2000)),
  pendingComponent: () => <Text>Loading create...</Text>,
  validateSearch: (search: Record<string, unknown>): TokensSearch => ({
    draft: (search.draft as string) ?? 'new',
  }),
});

but even in this case there is delay coming up before the loader. Even with preload flag To summarize the issue, I am not seeing the fallback UI, while the lazy component is getting loaded

extended-salmon•13mo ago

Hey, sorry I haven't been able to check this. Please move this to a github issue. I'm a bit busy this week and unsure when I'd be able to look into it. Perhaps, someone else would be able to either get you a solution or atleast work a reproduction unit test if its a bug that needs fixing.

quickest-silverOP•13mo ago

Sure

Gaming

Programming

Delay in loading component with tanstack lazy loading

Did you find this page helpful?