wise-white

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

fascinating-indigo•2y ago

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

wise-whiteOP•2y ago

what is that the default? just curious?

fascinating-indigo•2y ago

wise-whiteOP•2y ago

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

fascinating-indigo•2y 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...

Gaming

Programming

Router example with react query is slow to swap components

Did you find this page helpful?