Suspense

Try it

The button creates a promise that resolves after a couple of seconds, and a component reads it with use. While it's pending, the fallback is a Hold.

const Loaded = ({ promise }: { promise: Promise<void> }) => {
  use(promise);

  return <p>Loaded.</p>;
};

<Button onClick={() => setPromise(wait(2500))}>Load</Button>

{promise && (
  <Suspense fallback={<Holdbar.Hold />}>
    <Loaded promise={promise} />
  </Suspense>
)}

Nothing calls the bar here: React mounts the fallback while it waits and swaps it for the content when it's done. Press the button again and the boundary suspends again.

With streaming SSR

On the server the same fallback ends up in the HTML of the page. The bar is already running when the page arrives, and it closes when the streamed content replaces the fallback.

<Layout>
  <Header />
  <Suspense fallback={<Holdbar.Hold />}>
    <Comments />
  </Suspense>
</Layout>