Unexpected behaviour with Suspense, Outlet and React.use()

[luisdlopez]

I'm oversimplifying the code but I think you'll get the idea. I can provide more information if needed.

I have a root that looks like the following:

<Suspense fallback={<Loading />}>
  <Outlet />
</Suspense>

In one of my route modules, I am using the clientLoader to return a promise (from a fetch that, for this example, will take some seconds to resolve). Then, the Component gets the loaderData, and inside of, I call the data using React.use() to trigger the Suspense fallback while we wait for the data, like so:

export async function clientLoader({ params }: Route.ClientLoaderArgs) {
  return {
    query: fetch("..."), // this fetch returns a promise that is either pending or fulfilled - I swear
  }
}

export default function MyComponent({ loaderData }: Route.ComponentProps) {
  const { query } = loaderData;
  const data = React.use(query); // this right here prevents the rendering until the promise is fulfilled - as expected

  return <div>...</div>;
}

Now, when navigating from any page to this one, the fallback is not showing, even though React.use() is working as expected (and of course, this all works on the first load - but here, we are not dealing with any stale data or anything like that).

To give you another example, if I change MyComponent to include an additional Suspense, the whole thing works:

export default function MyComponent({ loaderData }: Route.ComponentProps) {
  const { query } = loaderData;

  return (
    <Suspense fallback={<Loading />}>
      <ChildComponent query={query} />
    </Suspense>
  );
}

function ChildComponent({ query }) {
  const data = React.use(query);

  return <div>...</div>;
}

The fallback properly shows while the promise is resolved.

Is this normal? Shouldn't the Suspense around the Outlet catch this?