T
TanStack•16mo ago
like-gold

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.
5 Replies
national-gold
national-gold•16mo ago
defaultPendingMs is set to 1s so you might want to change that if you want a loader earlier
like-gold
like-goldOP•16mo ago
what is that the default? just curious?
national-gold
national-gold•16mo ago
1s
like-gold
like-goldOP•16mo ago
why is 1s the default?* sorry about the confusion
national-gold
national-gold•16mo ago
I mean it's in the docs: https://tanstack.com/router/v1/docs/framework/react/guide/data-loading#showing-a-pending-component
Data Loading | TanStack Router React Docs
Data loading is a common concern for web applications and is related to routing. When loading a page for your app, it's ideal if all of the page's async requirements are fetched and fulfilled as early as possible, in parallel. The router is the best place to coordinate these async dependencies as it's usually the only place in your app that kno...

Did you find this page helpful?