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

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.

TanStack•2y ago•

5 replies

standard-azure

Router example with react query is slow to swap components

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

Router example with react query is slow to swap components

Similar Threads

Router example with react query is slow to swap components

Similar Threads

Similar Threads

Similar Threads