Components

<Suspense>

<Suspense> renders fallback while suspense-tracked async dependencies under its boundary are pending.

Import

import { Suspense } from "solid-js";

Type

function Suspense(props: {
  fallback?: JSX.Element;
  children: JSX.Element;
}): JSX.Element;

Props

`fallback`

Type: JSX.Element

Content rendered while suspense-tracked async dependencies are pending.

`children`

Type: JSX.Element

Subtree inside the suspense boundary.

Return value

Type: JSX.Element

Returns the rendered subtree or fallback content depending on pending suspense-tracked async dependencies.

Behavior

When a suspense-tracked async dependency is read inside the boundary, <Suspense> renders fallback until the pending work resolves.
<Suspense> is non-blocking: the subtree can continue running and create reactive owners before the boundary reveals the resolved content in the DOM.
Nested suspense boundaries handle suspense-tracked async dependencies under the nearest boundary.
onMount and createEffect inside the suspended subtree run after the boundary resolves.

Examples

Basic usage

import { createResource } from "solid-js";

const fetchMessage = async () => {
  await new Promise((resolve) => setTimeout(resolve, 1000));
  return "Loaded";
};

function AsyncMessage() {
  const [message] = createResource(fetchMessage);
  return <p>{message()}</p>;
}

<Suspense fallback={<p>Loading...</p>}>
  <AsyncMessage />
</Suspense>;

Nested suspense

import { createResource } from "solid-js";

const fetchTitle = async () => {
  await new Promise((resolve) => setTimeout(resolve, 500));
  return "Profile";
};

const fetchDetails = async () => {
  await new Promise((resolve) => setTimeout(resolve, 1000));
  return "Details loaded";
};

function Title() {
  const [title] = createResource(fetchTitle);
  return <h1>{title()}</h1>;
}

function Details() {
  const [details] = createResource(fetchDetails);
  return <p>{details()}</p>;
}

<Suspense fallback={<div>Loading page...</div>}>
  <Title />
  <Suspense fallback={<div>Loading details...</div>}>
    <Details />
  </Suspense>
</Suspense>;

Report an issue with this page