Struct leptos::TransitionProps

pub struct TransitionProps<F, E>where
    F: Fn() -> E + 'static,
    E: IntoView,{
    pub fallback: F,
    pub set_pending: Option<SignalSetter<bool>>,
    pub children: Box<dyn Fn(Scope) -> Fragment>,
}

Props for the Transition component.

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) -> Option<Vec<String>> {
    Some(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=move || view! { cx, <p>"Loading..."</p>}
      set_pending=set_pending.into()
    >
      {move || {
          cats.read(cx).map(|data| match data {
            None => view! { cx,  <pre>"Error"</pre> }.into_any(),
            Some(cats) => view! { cx,
              <div>{
                cats.iter()
                  .map(|src| {
                    view! { cx,
                      <img src={src}/>
                    }
                  })
                  .collect::<Vec<_>>()
              }</div>
            }.into_any(),
          })
        }
      }
    </Transition>
  </div>
};

Required Props

• cx: Scope
• fallback: [F]
  • Will be displayed while resources are pending.
• children: [Box<dyn Fn(Scope) -> Fragment>]
  • Will be displayed once all resources have resolved.

Optional Props

• set_pending: SignalSetter<bool>
  • A function that will be called when the component transitions into or out of the pending state, with its argument indicating whether it is pending (true) or not pending (false).

Fields

fallback: F

Will be displayed while resources are pending.

set_pending: Option<SignalSetter<bool>>

A function that will be called when the component transitions into or out of the pending state, with its argument indicating whether it is pending (true) or not pending (false).

children: Box<dyn Fn(Scope) -> Fragment>

Will be displayed once all resources have resolved.

Implementations

impl<F, E> TransitionProps<F, E>where F: Fn() -> E + 'static, E: IntoView,

pub fn builder() -> TransitionPropsBuilder<F, E, ((), (), ())>

Create a builder for building TransitionProps. On the builder, call .fallback(...), .set_pending(...)(optional), .children(...) to set the values of the fields. Finally, call .build() to create the instance of TransitionProps.