Suspense component

How to show fallback UI while async components are loading.

Purpose

Suspense renders a fallback while one or more children are waiting for async work. Use it with:

  • components that call useAsync;
  • components loaded with lazy;
  • streaming SSR boundaries that should flush a fallback before the async content resolves.

Usage

The component receives a required fallback prop. The fallback must be an html template.

import { Suspense, html } from 'wompo';

function Page() {
  return html`
    <${Suspense} fallback=${html`<p>Loading...</p>`}>
      <${AsyncPanel} />
    </${Suspense}>
  `;
}

With useAsync

Every child inside the boundary can trigger the same fallback.

function UserCard({ userId }) {
  const user = useAsync(() => fetchUser(userId), [userId]);

  return html`
    <article>
      ${user ? user.name : 'Loading...'}
    </article>
  `;
}

function TeamPage() {
  return html`
    <${Suspense} fallback=${html`<p>Loading team...</p>`}>
      <${UserCard} userId="ada" />
      <${UserCard} userId="grace" />
    </${Suspense}>
  `;
}

With lazy

Suspense also works while a lazy component is being imported.

import { Suspense, html, lazy } from 'wompo';

const LazyComponent = lazy(() => import('./LazyComponent.js'));

function App() {
  return html`
    <p>This content is static.</p>
    <${Suspense} fallback=${html`<i>Loading...</i>`}>
      <${LazyComponent}>I should be blue...</${LazyComponent}>
    </${Suspense}>
  `;
}

In streaming SSR, a pending Suspense boundary flushes the fallback first. When the async work resolves, Wompo streams the resolved content and swaps it into the boundary.