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!

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

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!

pendingComponent of a nested route not used

Similar Threads

pendingComponent of a nested route not used

Similar Threads

Similar Threads

Similar Threads