Suspense

wybthon.suspense¶

suspense ¶

Suspense component for rendering fallback UI during async loading.

Suspense subscribes to one or more Resources and shows a fallback while any of them are loading. Set keep_previous=True to keep showing the previously-resolved children when refetching.

Suspense ¶

Suspense(props: Any) -> Any

Render a fallback while one or more resources are loading.

Parameters:

Name	Type	Description	Default
`props`	`Any`	The component's props with the following keys: `resources` / `resource`: A single `Resource` or a list of resources. When omitted, the component just renders its children. `fallback`: `VNode`, string, or callable returning one of those. Shown while any resource is loading. `keep_previous` (`bool`, default `False`): When `True`, show previously-resolved children during refetches instead of replacing them with the fallback. `children`: Children rendered when no resource is loading.	required

Returns:

Type	Description
`Any`	A reactive `VNode` subtree that toggles
`Any`	between fallback and children.

What's in this module¶

Suspense renders a fallback while any create_resource in its subtree is pending. It's the canonical way to coordinate loading states for async data and lazy components.

Usage¶

from wybthon import Suspense, component, create_resource, create_signal
from wybthon.html import div, p, span


async def fetch_user(id_: int) -> dict:
    ...


@component
def UserCard(id):
    user = create_resource(id, fetch_user)
    return div(
        p("Name: ", span(lambda: user()["name"])),
    )


@component
def Profile():
    id_, _ = create_signal(42)
    return Suspense(
        fallback=lambda: p("Loading…"),
        children=lambda: UserCard(id=id_),
    )

fallback is a callable so it can stay reactive too.
The boundary waits for all pending resources in its subtree.