Function sycamore::suspense::Suspense

pub fn Suspense<'a, G: GenericNode>(
    cx: Scope<'a>,
    props: SuspenseProps<'a, G>
) -> View<G>

Suspense lets you wait for async tasks to complete before rendering the UI. This is useful for asynchronous data-fetching or other asynchronous tasks.

Suspense is deeply integrated with async components. Async components that are nested under the Suspense component will not be rendered until they are resolved. Having multiple async components will have the effect that the final UI will only be rendered once all individual async components are rendered. This is useful for showing a loading indicator while the data is being loaded.

Example

use sycamore::prelude::*;
use sycamore::suspense::Suspense;

#[component]
async fn AsyncComp<G: Html>(cx: Scope<'_>) -> View<G> {
    view! { cx, "Hello Suspense!" }
}

#[component]
fn App<G: Html>(cx: Scope) -> View<G> {
    view! { cx,
        Suspense(fallback=view! { cx, "Loading..." }) {
            AsyncComp {}
        }
    }
}