<SuspenseList>

:::[warning] This is an experimental component :::

<SuspenseList> coordinates how multiple child suspense boundaries reveal their content.

Import

import { SuspenseList } from "solid-js";

Type

function SuspenseList(props: {
  children: JSX.Element;
  revealOrder: "forwards" | "backwards" | "together";
  tail?: "collapsed" | "hidden";
}): JSX.Element;

Props

children

• Type: JSX.Element

Suspense and suspense-list children inside the list.

revealOrder

• Type: "forwards" | "backwards" | "together"

Order used to reveal child boundaries.

tail

• Type: "collapsed" | "hidden"

Controls fallback visibility for later items after the first still-pending item in ordered reveal modes.

Return value

• Type: JSX.Element

Returns the coordinated suspense boundaries.

Behavior

• revealOrder="forwards" reveals items from first to last.
• revealOrder="backwards" reveals items from last to first.
• revealOrder="together" reveals all items only after all coordinated boundaries are ready.
• With tail="collapsed", the first still-pending item can keep its fallback visible, while later pending items hide theirs.
• With tail="hidden", pending items after the first still-pending item hide their fallbacks.
• <SuspenseList> coordinates child suspense boundaries. It does not suspend by itself.

Examples

Basic usage

import { createResource, Suspense } from "solid-js";

const delayed = async <T,>(value: T, ms: number) => {
  await new Promise((resolve) => setTimeout(resolve, ms));
  return value;
};

function ProfileDetails() {
  const [user] = createResource(() => delayed({ name: "Ada" }, 500));
  return <h2>{user()?.name}</h2>;
}

function ProfileTimeline() {
  const [posts] = createResource(() => delayed(["First post"], 1000));
  return (
    <ul>
      {posts()?.map((post) => (
        <li>{post}</li>
      ))}
    </ul>
  );
}

<SuspenseList revealOrder="forwards" tail="collapsed">
  <Suspense fallback={<h2>Loading profile...</h2>}>
    <ProfileDetails />
  </Suspense>
  <Suspense fallback={<h2>Loading posts...</h2>}>
    <ProfileTimeline />
  </Suspense>
</SuspenseList>;

Related

• <Suspense>