Loader waits for promises to resolve, negating Suspense

[gcurtis-vibe]

I'm using React Router as a...

framework

Reproduction

https://stackblitz.com/edit/github-xw8frhzj?file=app%2Froutes%2Fhome.tsx

import { Suspense } from 'react';
import { Await, useLoaderData } from 'react-router';

export async function loader() {
  console.log('loader is called');
  console.time('loader');
  const fakePromise = new Promise((resolve) => {
    setTimeout(() => {
      resolve('test');
    }, 5000);
  });
  return fakePromise;
}

export default function TestComponent() {
  console.log('component called');
  const dataPromise = useLoaderData();
  console.log('dataPromise is ', dataPromise);
  console.timeEnd('loader');
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <Await resolve={dataPromise}>{(data) => <div>{data}</div>}</Await>
      </Suspense>
    </div>
  );
}

System Info

System:
    OS: Linux 6.8 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
    CPU: (20) x64 13th Gen Intel(R) Core(TM) i9-13900H
    Memory: 17.99 GB / 31.19 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm
  Browsers:
    Brave Browser: 133.1.75.180
  npmPackages:
    @react-router/express: ^7.2.0 => 7.2.0 
    @react-router/fs-routes: ^7.2.0 => 7.2.0 
    @react-router/node: ^7.2.0 => 7.2.0 
    @react-router/remix-routes-option-adapter: ^7.2.0 => 7.2.0 
    @react-router/serve: ^7.2.0 => 7.2.0 
    react-router: ^7.2.0 => 7.2.0 
    vite: ^5.4.10 => 5.4.14

Used Package Manager

npm

Expected Behavior

The Loading... div should appear, and after 5 seconds, be replaced by test.

Actual Behavior

The Loading... div never appears
Instead the page loads for 5 seconds before displaying test.

The console.logs read:

loader is called
component called
dataPromise is  test
loader: 5.014s

[jrestall]

You need to return the promise in an object like return { fakePromise };. You can't return the promise directly as the loader function is itself an async function, so if it returns a promise then React Router will wait for it before rendering the component.