T
TanStack•2y ago
exotic-emerald

pendingComponent of a nested route not used

Hey 👋🏽 , I don't understand why a pendingComponent is not used. Here's a nested route def 
export const Route = new FileRoute("/vouchers/creation").createRoute({
  loader: ({ context: { queryClient } }) => {
    return queryClient.ensureQueryData(currentUserQueryOptions());
  },
  pendingComponent: () => <div>pending....</div>,
  component: () => (
    <div>
      <ul className="steps mb-5 w-[28rem]">
        <li className="step step-primary">First Step</li>
        <li className="step">Second Step</li>
      </ul>
      <Outlet />
    </div>
  ),
});
export const Route = new FileRoute("/vouchers/creation").createRoute({
  loader: ({ context: { queryClient } }) => {
    return queryClient.ensureQueryData(currentUserQueryOptions());
  },
  pendingComponent: () => <div>pending....</div>,
  component: () => (
    <div>
      <ul className="steps mb-5 w-[28rem]">
        <li className="step step-primary">First Step</li>
        <li className="step">Second Step</li>
      </ul>
      <Outlet />
    </div>
  ),
});
And here's my root def: 
export const Route = rootRouteWithContext()({
  pendingComponent: () => <div>Loading...</div>,
  component: RootComponent,
});
export const Route = rootRouteWithContext()({
  pendingComponent: () => <div>Loading...</div>,
  component: RootComponent,
});
If the loader of my nested route is running, the pendingComoponent of the root route is shown. How I can fix this? Thanks!
1 Reply
rival-black
rival-black•2y ago
can you please provide a minimal complete example?

Did you find this page helpful?