TanStackT
TanStack•2y ago•
9 replies
abstract-purple

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


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?
Was this page helpful?