Function leptos_core::Transition
source · pub fn Transition<F, E, G>(
cx: Scope,
props: TransitionProps<F, E, G>
) -> impl Fn() -> Childwhere
F: IntoChild + Clone,
E: IntoChild,
G: Fn() -> E + 'static,
Expand description
If any Resources are 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
. Unlike Suspense
, this will not fall
back to the fallback
state if there are further changes after the initial load.
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) -> Result<Vec<String>, ()> { Ok(vec![]) }
let (cat_count, set_cat_count) = create_signal::<u32>(cx, 1);
let (pending, set_pending) = create_signal(cx, false);
let cats = create_resource(cx, cat_count, |count| fetch_cats(count));
view! { cx,
<div>
<Transition
fallback={"Loading...".to_string()}
set_pending=set_pending
>
{move || {
cats.read().map(|data| match data {
Err(_) => view! { cx, <pre>"Error"</pre> },
Ok(cats) => view! { cx,
<div>{
cats.iter()
.map(|src| {
view! { cx,
<img src={src}/>
}
})
.collect::<Vec<_>>()
}</div>
},
})
}
}
</Transition>
</div>
};