Hello everyone, so I have this simple app which is using latest Next.js version and it's really just a single page.tsx:

import {Suspense} from 'react';

async function Sleep(props: {level: number}) {
  await new Promise(resolve => setTimeout(resolve, 5000));
  const nextLevel = props.level - 1;

  return (
    <>
      <p>Sleep level {props.level} loaded</p>
      {nextLevel && (
        <Suspense fallback={<p>Sleep level {nextLevel} loading</p>}>
          <Sleep level={nextLevel} />
        </Suspense>
      )}
    </>
  );
}

export default async function Home() {
  return (
    <Suspense fallback={<p>Loading root</p>}>
      <Sleep level={10} />
    </Suspense>
  );
}

The problem is, when I go to http://localhost:3000 the browser hangs for 5 seconds and displays:

Sleep level 10 loaded
Sleep level 9 loading

Should it immediately display <p>Loading root</p> instead? Thanks!