dioxus/packages/playwright-tests/suspense-carousel/src/main.rs

// This test is used by playwright configured in the root of the repo
// Tests:
// - Streaming hydration
// - Suspense
// - Server futures

#![allow(non_snake_case, unused)]
use dioxus::{fullstack::commit_initial_chunk, prelude::*};
use serde::{Deserialize, Serialize};

fn app() -> Element {
    // Start streaming immediately
    use_hook(commit_initial_chunk);
    let mut count = use_signal(|| 0);

    rsx! {
        button {
            id: "increment-carousel-button",
            onclick: move |_| count += 1,
            "Increment"
        }
        button {
            id: "decrement-carousel-button",
            onclick: move |_| count -= 1,
            "Decrement"
        }
        div {
            "Hello world"
        }
        div {
            for i in count()..count() + 3 {
                SuspenseBoundary {
                    key: "{i}",
                    fallback: |_| rsx! {
                        "Loading..."
                    },
                    SuspendedComponent {
                        id: i
                    }
                }
            }
        }
        div { "footer 123" }
    }
}

#[derive(Clone, Serialize, Deserialize, Debug, PartialEq)]
enum ResolvedOn {
    Server,
    Client,
}

impl ResolvedOn {
    #[cfg(feature = "web")]
    const CURRENT: Self = Self::Client;
    #[cfg(not(feature = "web"))]
    const CURRENT: Self = Self::Server;
}

#[component]
fn SuspendedComponent(id: i32) -> Element {
    let resolved_on = use_server_future(move || async move {
        async_std::task::sleep(std::time::Duration::from_secs(1)).await;
        ResolvedOn::CURRENT
    })?()
    .unwrap();

    let mut count = use_signal(|| 0);

    rsx! {
        div {
            id: "outer-{id}",
            "outer suspense result: {resolved_on:?}"
            button {
                id: "outer-button-{id}",
                onclick: move |_| count += 1,
                "{count}"
            }
            SuspenseBoundary {
                fallback: |_| rsx! {
                    "Loading... more"
                },
                NestedSuspendedComponent {
                    id
                }
            }
        }
    }
}

#[component]
fn NestedSuspendedComponent(id: i32) -> Element {
    let resolved_on = use_server_future(move || async move {
        async_std::task::sleep(std::time::Duration::from_secs(1)).await;
        ResolvedOn::CURRENT
    })?()
    .unwrap();
    let mut count = use_signal(|| 0);
    rsx! {
        div {
            "nested suspense result: {resolved_on:?}"
            button {
                id: "nested-button-{id}",
                onclick: move |_| count += 1,
                "{count}"
            }
        }
    }
}

fn main() {
    LaunchBuilder::new()
        .with_cfg(server_only! {
            dioxus::server::ServeConfig::builder().enable_out_of_order_streaming()
        })
        .launch(app);
}