pub fn Suspense<V>(props: SuspenseProps<V>) -> impl IntoViewwhere
V: IntoView + 'static,
Expand description
If any Resource
is read in the children
of this
component, it will show the fallback
while they are loading. Once all are resolved,
it will render the children
.
Note that the children
will be rendered initially (in order to capture the fact that
those resources are read under the suspense), so you cannot assume that resources have
Some
value in children
.
async fn fetch_cats(how_many: u32) -> Option<Vec<String>> { Some(vec![]) }
let (cat_count, set_cat_count) = create_signal::<u32>(1);
let cats = create_resource(move || cat_count.get(), |count| fetch_cats(count));
view! {
<div>
<Suspense fallback=move || view! { <p>"Loading (Suspense Fallback)..."</p> }>
{move || {
cats.get().map(|data| match data {
None => view! { <pre>"Error"</pre> }.into_view(),
Some(cats) => cats
.iter()
.map(|src| {
view! {
<img src={src}/>
}
})
.collect_view(),
})
}
}
</Suspense>
</div>
};
§Required Props
- children: [
Rc<dyn Fn() -> V>
]- Children will be displayed once all
async
Resource
s have resolved.
- Children will be displayed once all
§Optional Props
- fallback:
impl Into<ViewFn>
- Returns a fallback UI that will be shown while
async
Resource
s are still loading. By default this is the empty view.
- Returns a fallback UI that will be shown while