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 #2311