Function Await

pub fn Await<T, Fut, Chil, V>(
    props: AwaitProps<T, Fut, Chil, V>,
) -> impl IntoView
where
    T: Send + Sync + Serialize + DeserializeOwned + 'static,
    Fut: Future<Output = T> + Send + 'static,
    Chil: FnOnce(&T) -> V + Send + 'static,
    V: IntoView + 'static,

Allows you to inline the data loading for an async block or server function directly into your view. This is the equivalent of combining a [create_resource] that only loads once (i.e., with a source signal || ()) with a Suspense with no fallback.

Adding let:{variable name} to the props makes the data available in the children that variable name, when resolved.

async fn fetch_monkeys(monkey: i32) -> i32 {
    // do some expensive work
    3
}

view! {
    <Await
        future=fetch_monkeys(3)
        let:data
    >
        <p>{*data} " little monkeys, jumping on the bed."</p>
    </Await>
}

Required Props

• future: [Fut]
  • A Future that will the component will .await before rendering.
• children: [Chil]

  • A function that takes a reference to the resolved data from the future renders a view.

    Syntax

    This can be passed in the view children of the <Await/> by using the let: syntax to specify the name for the data variable.

    view! {
        <Await
            future=fetch_monkeys(3)
            let:data
        >
            <p>{*data} " little monkeys, jumping on the bed."</p>
        </Await>
    }

    is the same as

    view! {
       <Await
           future=fetch_monkeys(3)
           children=|data| view! {
             <p>{*data} " little monkeys, jumping on the bed."</p>
           }
       />
    }

Optional Props

• blocking: bool
  • If true, the component will create a blocking resource, preventing the HTML stream from returning anything before future has resolved.