Router example with react query is slow to swap components

[dark idol]

Using the example from the documentation, I find that switching between routes there is delay in swapping the Outlet when we have a loader running. Even until we show the pending component it takes a second. How can we improve the smoothness of the app?

export const Route = createFileRoute("/posts")({
  loader: ({ context: { queryClient } }) => queryClient.ensureQueryData(postsQueryOptions),
  component: PostsComponent,
  pendingComponent: () => <div>Loading...</div>,
});

To really see I updated the sleep to 10s and you can see a bit of a delay to even show the Loading....:

https://stackblitz.com/edit/tanstack-router-u2ewb3?file=src%2Froutes%2Fposts.tsx

My current solution is to not use loaders but this defeats the purpose of preloading data.

[vivid barn]

defaultPendingMs is set to 1s so you might want to change that if you want a loader earlier

[dark idol]

what is that the default? just curious?

[vivid barn]

1s

[dark idol]

why is 1s the default?* sorry about the confusion