use std::rc::Rc;

    let dem_res = create_local_resource(
        || (),
        |_| async {
            let response = gloo_net::http::Request::get("/api/v0/clicked")
                .send()
                .await
                .map_err(Rc::new)?;
            let json = response.json::<Vec<Box<str>>>().await.map_err(Rc::new)?;
            Ok::<_, Rc<gloo_net::Error>>(
                json.into_iter()
                    .map(|s| Rc::from(s) as Rc<str>)
                    .collect::<Vec<_>>(),
            )
        },
    );
    let is_dem_res_error = move || dem_res.with(|res| res.as_ref().is_some_and(|res| res.is_err()));
    let dem_res_data = move || {
        if dem_res.loading().get() {
            None
        } else {
            dem_res.with(|res| res.clone().and_then(|d| d.ok()))
        }
    };
    let dem_res_error = move || {
        if dem_res.loading().get() {
            None
        } else {
            dem_res.with(|res| res.clone().and_then(|d| d.err()))
        }
    };

                <button class="btn" hx-get="/api/v0/clicked" hx-swap="outerHTML">
                    Click Me
                </button>

                <Show when={move || !is_dem_res_error() && !dem_res.loading().get()}
                    fallback={move || {
                        view! {<Show when={move || dem_res_error().is_some()}>
                            <div class="text-error">
                                {move || format!("ERROR: {}", dem_res_error().unwrap())}
                            </div>
                        </Show>}
                    }}>
                    <div>
                        {move || dem_res_data().unwrap().join(", ")}
                    </div>
                </Show>