suspense works in desktop

examples/dog_app.rs

@@ -6,7 +6,11 @@ use dioxus::prelude::*;
 use std::collections::HashMap;
 
 fn main() {
-    dioxus_desktop::launch(app);
+    dioxus_desktop::launch(|cx| {
+        cx.render(rsx! {
+            app_root {}
+        })
+    });
 }
 
 #[derive(Debug, Clone, PartialEq, serde::Deserialize)]
@@ -14,8 +18,8 @@ struct ListBreeds {
     message: HashMap<String, Vec<String>>,
 }
 
-fn app(cx: Scope) -> Element {
-    let breed = use_state(&cx, || None);
+async fn app_root(cx: Scope<'_>) -> Element {
+    let breed = use_state(&cx, || "deerhound".to_string());
 
     let breeds = use_future(&cx, (), |_| async move {
         reqwest::get("https://dog.ceo/api/breeds/list/all")
@@ -25,32 +29,26 @@ fn app(cx: Scope) -> Element {
             .await
     });
 
-    match breeds.value() {
-        Some(Ok(breeds)) => cx.render(rsx! {
-            div {
+    match breeds.await {
+        Ok(breeds) => cx.render(rsx! {
+            div { height: "500px",
                 h1 { "Select a dog breed!" }
                 div { display: "flex",
                     ul { flex: "50%",
-                        breeds.message.keys().map(|cur_breed| rsx!(
+                        breeds.message.keys().take(5).map(|cur_breed| rsx!(
                             li {
                                 button {
-                                    onclick: move |_| breed.set(Some(cur_breed.clone())),
+                                    onclick: move |_| breed.set(cur_breed.clone()),
                                     "{cur_breed}"
                                 }
                             }
                         ))
                     }
-                    div { flex: "50%",
-                        match breed.get() {
-                            Some(breed) => rsx!( Breed { breed: breed.clone() } ),
-                            None => rsx!("No Breed selected"),
-                        }
-                    }
+                    div { flex: "50%", Breed { breed: breed.to_string() } }
                 }
             }
         }),
-        Some(Err(_e)) => cx.render(rsx! { div { "Error fetching breeds" } }),
-        None => cx.render(rsx! { div { "Loading dogs..." } }),
+        Err(_e) => cx.render(rsx! { div { "Error fetching breeds" } }),
     }
 }
 
@@ -60,7 +58,9 @@ struct DogApi {
 }
 
 #[inline_props]
-fn Breed(cx: Scope, breed: String) -> Element {
+async fn Breed(cx: Scope, breed: String) -> Element {
+    println!("Rendering Breed: {}", breed);
+
     let fut = use_future(&cx, (breed,), |(breed,)| async move {
         reqwest::get(format!("https://dog.ceo/api/breed/{}/images/random", breed))
             .await
@@ -69,21 +69,24 @@ fn Breed(cx: Scope, breed: String) -> Element {
             .await
     });
 
-    cx.render(match fut.value() {
-        Some(Ok(resp)) => rsx! {
-            button {
-                onclick: move |_| fut.restart(),
-                "Click to fetch another doggo"
-            }
+    let resp = fut.await;
+
+    println!("achieved results!");
+
+    match resp {
+        Ok(resp) => cx.render(rsx! {
             div {
+                button {
+                    onclick: move |_| fut.restart(),
+                    "Click to fetch another doggo"
+                }
                 img {
+                    src: "{resp.message}",
                     max_width: "500px",
                     max_height: "500px",
-                    src: "{resp.message}",
                 }
             }
-        },
-        Some(Err(_)) => rsx! { div { "loading dogs failed" } },
-        None => rsx! { div { "loading dogs..." } },
-    })
+        }),
+        Err(e) => cx.render(rsx! { div { "loading dogs failed" } }),
+    }
 }

examples/suspense2.rs

@@ -0,0 +1,16 @@
+use dioxus::prelude::*;
+use dioxus_desktop::{Config, LogicalSize, WindowBuilder};
+
+fn main() {
+    dioxus_desktop::launch(|cx| cx.render(rsx! { async_app {} }));
+}
+
+async fn async_app(cx: Scope<'_>) -> Element {
+    tokio::time::sleep(tokio::time::Duration::from_secs(1)).await;
+
+    cx.render(rsx! {
+        div {
+            "hi!"
+        }
+    })
+}