TanStackT
TanStack•2y ago•
1 reply
verbal-lime

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


And here's my root def:
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!
Was this page helpful?