Router example with react query is slow to swap components

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

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

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

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.

Router example with react query is slow to swap components

Similar Threads

Similar Threads

Similar Threads