TanStackT
TanStack•2mo ago•
5 replies
progressive-amaranth

pendingComponent, Loader, ensureQueryData — What’s happening with navigation?

Hey! I’m seeing a noticeable delay when navigating between routes that have a loader doing a query prefetch. The route does have a pendingComponent, but when I click to navigate, the browser immediately updates the URL while the actual screen only switches ~1 second later

Is this expected behavior with the combination of pendingComponent + loader + ensureQueryData? Or does this indicate some issue in my setup?

And if this is the expected flow, is there any recommended approach to make the navigation feel more fluid?

This happens regardless of the ssr setting on the route false, true, or "data-only". The delay is always there. In the video I’m attaching, I’m artificially delaying the query by 6 seconds so the behavior is easier to see

Thanks!

export const Route = createFileRoute('/backoffice/clients')({
  component: RouteComponent,
  pendingComponent: PendingRoute,
  loader: async ({ context }) => {
    await context.queryClient.ensureQueryData(clientQuieries.insights())
  },
})
Was this page helpful?