I'm trying to show a loading state while an async component in my layout fetches data, but the Suspense fallback never shows up. Here's a minimal reproduction:

async function SlowComponent({ children }: { children: React.ReactNode }) {
  // Artificial delay to simulate slow data fetching
  await new Promise((resolve) => setTimeout(resolve, 3000));
  return <div>{children}</div>;
}

export default function TestLayout({ children }: TestLayoutProps) {
  return (
    <div className="h-screen w-screen">
      <Suspense fallback={<div>Loading...</div>}>
        <SlowComponent>{children}</SlowComponent>
      </Suspense>
    </div>
  );
}

Instead of showing the "Loading..." fallback during the 3-second delay, the page just stays blank. What am I missing here? How can I properly show a loading state while the async component in my layout is fetching?

Using:
- Next.js 14.2.12
- App Dir
- Server Components