Suspense

Shows fallback while resources read inside it are loading for the first time. The children are created once and stay alive (with their state) while the fallback is visible; the boundary only switches what is displayed. Nested boundaries each track their own resources.

On the server a boundary renders its fallback when its data is not ready (renderToString), or streams the content later (renderToStream). Content and fallback get their own hydration key space, so what a boundary renders never shifts the keys of its siblings.

Import#

import { Suspense } from "@shadow-js/web";

Signature#

function Suspense(props: SuspenseProps): Accessor<unknown>

Parameters#

Returns#

An accessor of what the boundary shows: the fallback while a resource is pending, the children otherwise.

Examples#

import { useResource } from "@shadow-js/core";
import { Suspense } from "@shadow-js/web";

function Profile() {
  const name = useResource(() => Promise.resolve("Ada"));
  return <p>{name()}</p>;
}

function Page() {
  return (
    <Suspense fallback={<p>Loading...</p>}>
      <Profile />
    </Suspense>
  );
}