How would you show multiple separate loading states for different sections of a page using several Suspense boundaries?

Instead of wrapping an entire page in one single Suspense boundary, you can place a separate Suspense boundary around each individual section, letting each part of the page finish loading and appear independently, rather than waiting for every single piece to be ready before showing anything at all.

function Dashboard() {
  return (
    <div>
      <Suspense fallback={<Spinner />}>
        <UserStats />
      </Suspense>
      <Suspense fallback={<Spinner />}>
        <RecentActivity />
      </Suspense>
    </div>
  );
}