Pending spinner + throw redirect = `MatchInnerImpl` error

[piscopancer]

Describe the bug

Hey, I want to know why there's component race condition for a pending component when i throw redirects. The logic's simple - show a spinner for good looks right away, but check the user role in the background - then redirect to their dedicated routes

// __root.tsx
export const Route = createRootRouteWithContext<RouterContext>()({
  component: RootComponent,
  pendingMs: 0, // show spinnner immediately - error when `beforeLoad` is over. Set it to `1000` - no error
  pendingMinMs: 500,
  pendingComponent: () => {
    return <SpinnerScreen />;
  },
  errorComponent: (props) => <pre>{JSON.stringify(props.error, null, 2)}</pre>,
  async beforeLoad({ context, location }) {
    const user = await context.qc.ensureQueryData(sessionQueryOptions);
    if (location.pathname.startsWith(WelcomeRoute.to)) return;
    const redir = match(user.type)
      .with("edit_op", () =>
        !location.pathname.startsWith(EditSalesRoute.to)
          ? redirect({
              to: EditSalesRoute.to,
              replace: true,
            })
          : undefined,
      )
      .with(...)
      .exhaustive();
    if (redir) throw redir;
  },
});

and you can see a white screen
when i reload the page it will be normal
when i set pendingMs to a 1000, a spinner will not show up but the error will be gone, luckily
though i need a spinner right away

Your minimal, reproducible example

Steps to reproduce

Expected behavior

No react dom error must appear

How often does this bug happen?

None

Screenshots or Videos

No response

Platform

Windows 10, Zen browser latest

Tanstack Query adapter

None

TanStack Query version

5.90.12

TypeScript version

5.9.3

Additional context

No response

[codeart1st]

It's probably the same as my issue #7120

[piscopancer]

It's probably the same as my issue #7120

And did you find a solution? Currently, I think it's a bug and I even wanted to update the package.

Also I don't find any other neat way to render a spinner because beforeLoad prevents react from rendering

[piscopancer]

any update on this?

[melv-n]

#7158 aims to address #7120

[piscopancer]

#7158 aims to address #7120

So there is no fix yet?

[schiller-manuel]

you did not provide a minimal complete reproducer. please do so.

[piscopancer]

you did not provide a minimal complete reproducer. please do so.

But my explanation seems to be enough. I throughly explained what I did. BeforeLoad + waiting a server fetch inside. Then redirect. In the meanwhile, rendering a pending component, when redirect thrown - error. If pendingComponent was not provided - fine

[piscopancer]

If you insist I can create a repo but it will take time, is it this necessary then?

[talelmishali]

@schiller-manuel By the way, even when throwing a redirect on beforeLoad getting the same results - needs a separate issue or you think it will be covered?