@arcmantle/lit-jsx / runtime/suspense-component

runtime/suspense-component

Functions

Suspense()

Suspense<T>(props): unknown

Defined in: runtime/suspense-component.ts:29

Renders fallback content while waiting for a promise to resolve, similar to React's Suspense. Uses lit-html's until directive to handle asynchronous content.

Type Parameters

T

T

The type of the resolved promise value

Parameters

props

children

(value) => unknown

Render function that receives the resolved promise value

promise

Promise<T>

A promise that resolves to a value passed to the children render function

fallback?

unknown

Optional fallback content to display while the promise is pending

Returns

unknown

The rendered JSX element, showing fallback until the promise resolves

Example

<Suspense
  promise={fetchUser()}
  fallback={<div>Loading user...</div>}
>
  {(user) => <div>Welcome, {user.name}!</div>}
</Suspense>

// Without fallback (nothing renders until promise resolves)
<Suspense promise={fetchData()}>
  {(data) => <div>{data.content}</div>}
</Suspense>