SuspenseList

Coordinates the <Suspense> boundaries below it so a page of independent loads reveals in a calm order instead of popping in at random.

Coordinates the <Suspense> boundaries below it so a page of independent loads reveals in a calm order instead of popping in at random.

Import#

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

Signature#

function SuspenseList(props: SuspenseListProps): Accessor<unknown>

Parameters#

Name	Description
`props`	See SuspenseListProps.

Returns#

An accessor of the children, rendered with the list's coordination in context.

Examples#

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

function Skeleton() {
  return <p>Loading...</p>;
}

function Profile() {
  return <p>Profile</p>;
}

function Feed() {
  return <p>Feed</p>;
}

function Page() {
  return (
    <SuspenseList revealOrder="forwards" tail="collapsed">
      <Suspense fallback={<Skeleton />}>
        <Profile />
      </Suspense>
      <Suspense fallback={<Skeleton />}>
        <Feed />
      </Suspense>
    </SuspenseList>
  );
}