# `<Suspense/>`

In the previous chapter, we showed how you can create a simple loading screen to show some fallback while a resource is loading.

```rust
let (count, set_count) = create_signal(cx, 0);
let a = create_resource(cx, count, |count| async move { load_a(count).await });

view! { cx,
    <h1>"My Data"</h1>
    {move || match once.read(cx) {
        None => view! { cx, <p>"Loading..."</p> }.into_view(cx),
        Some(data) => view! { cx, <ShowData data/> }.into_view(cx)
    }}
}
```

But what if we have two resources, and want to wait for both of them?

```rust
let (count, set_count) = create_signal(cx, 0);
let (count2, set_count2) = create_signal(cx, 0);
let a = create_resource(cx, count, |count| async move { load_a(count).await });
let b = create_resource(cx, count2, |count| async move { load_b(count).await });

view! { cx,
    <h1>"My Data"</h1>
    {move || match (a.read(cx), b.read(cx)) {
        (Some(a), Some(b)) => view! { cx,
            <ShowA a/>
            <ShowA b/>
        }.into_view(cx),
        _ => view! { cx, <p>"Loading..."</p> }.into_view(cx)
    }}
}
```

That’s not _so_ bad, but it’s kind of annoying. What if we could invert the flow of control?

The [`<Suspense/>`](https://docs.rs/leptos/latest/leptos/fn.Suspense.html) component lets us do exactly that. You give it a `fallback` prop and children, one or more of which usually involves reading from a resource. Reading from a resource “under” a `<Suspense/>` (i.e., in one of its children) registers that resource with the `<Suspense/>`. If it’s still waiting for resources to load, it shows the `fallback`. When they’ve all loaded, it shows the children.

```rust
let (count, set_count) = create_signal(cx, 0);
let (count2, set_count2) = create_signal(cx, 0);
let a = create_resource(cx, count, |count| async move { load_a(count).await });
let b = create_resource(cx, count2, |count| async move { load_b(count).await });

view! { cx,
    <h1>"My Data"</h1>
    <Suspense
        fallback=move || view! { cx, <p>"Loading..."</p> }
    >
        <h2>"My Data"</h2>
        <h3>"A"</h3>
        {move || {
            a.read(cx)
                .map(|a| view! { cx, <ShowA a/> })
        }}
        <h3>"B"</h3>
        {move || {
            b.read(cx)
                .map(|b| view! { cx, <ShowB b/> })
        }}
    </Suspense>
}
```

Every time one of the resources is reloading, the `"Loading..."` fallback will show again.

This inversion of the flow of control makes it easier to add or remove individual resources, as you don’t need to handle the matching yourself. It also unlocks some massive performance improvements during server-side rendering, which we’ll talk about during a later chapter.

## `<Await/>`

In you’re simply trying to wait for some `Future` to resolve before rendering, you may find the `<Await/>` component helpful in reducing boilerplate. `<Await/>` essentially combines a resource with the source argument `|| ()` with a `<Suspense/>` with no fallback.

In other words:

1. It only polls the `Future` once, and does not respond to any reactive changes.
2. It does not render anything until the `Future` resolves.
3. After the `Future` resolves, its binds its data to whatever variable name you choose and then renders its children with that variable in scope.

```rust
async fn fetch_monkeys(monkey: i32) -> i32 {
    // maybe this didn't need to be async
    monkey * 2
}
view! { cx,
    <Await
        // `future` provides the `Future` to be resolved
        future=|cx| fetch_monkeys(3)
        // the data is bound to whatever variable name you provide
        bind:data
    >
        // you receive the data by reference and can use it in your view here
        <p>{*data} " little monkeys, jumping on the bed."</p>
    </Await>
}
```

[Click to open CodeSandbox.](https://codesandbox.io/p/sandbox/11-suspense-907niv?file=%2Fsrc%2Fmain.rs)

<iframe src="https://codesandbox.io/p/sandbox/11-suspense-907niv?file=%2Fsrc%2Fmain.rs" width="100%" height="1000px" style="max-height: 100vh"></iframe>

<details>
<summary>CodeSandbox Source</summary>

```rust
use gloo_timers::future::TimeoutFuture;
use leptos::*;

async fn important_api_call(name: String) -> String {
    TimeoutFuture::new(1_000).await;
    name.to_ascii_uppercase()
}

#[component]
fn App(cx: Scope) -> impl IntoView {
    let (name, set_name) = create_signal(cx, "Bill".to_string());

    // this will reload every time `name` changes
    let async_data = create_resource(
        cx,
        name,
        |name| async move { important_api_call(name).await },
    );

    view! { cx,
        <input
            on:input=move |ev| {
                set_name(event_target_value(&ev));
            }
            prop:value=name
        />
        <p><code>"name:"</code> {name}</p>
        <Suspense
            // the fallback will show whenever a resource
            // read "under" the suspense is loading
            fallback=move || view! { cx, <p>"Loading..."</p> }
        >
            // the children will be rendered once initially,
            // and then whenever any resources has been resolved
            <p>
                "Your shouting name is "
                {move || async_data.read(cx)}
            </p>
        </Suspense>
    }
}

fn main() {
    leptos::mount_to_body(|cx| view! { cx, <App/> })
}

```

</details>
</preview>
