Fix suspense on resource

examples/dog_app.rs

@@ -29,7 +29,7 @@ fn app() -> Element {
         }
     });
 
-    let Some(breed_list) = breed_list.value().cloned() else {
+    let Some(breed_list) = breed_list() else {
         return rsx! { "loading breeds..." };
     };
 
@@ -44,7 +44,7 @@ fn app() -> Element {
 
 #[component]
 fn BreedPic(breed: Signal<String>) -> Element {
-    let fut = use_resource(move || async move {
+    let mut fut = use_resource(move || async move {
         reqwest::get(format!("https://dog.ceo/api/breed/{breed}/images/random"))
             .await
             .unwrap()
@@ -52,14 +52,13 @@ fn BreedPic(breed: Signal<String>) -> Element {
             .await
     });
 
-    match fut.value().read().as_ref() {
+    match fut.read().as_ref() {
         Some(Ok(resp)) => rsx! {
-            div {
-                button { onclick: move |_| fut.restart(), "Click to fetch another doggo" }
-                img { max_width: "500px", max_height: "500px", src: "{resp.message}" }
-            }
+            button { onclick: move |_| fut.restart(), "Click to fetch another doggo" }
+            img { max_width: "500px", max_height: "500px", src: "{resp.message}" }
         },
-        _ => rsx! { "loading image..." },
+        Some(Err(_)) => rsx! { "loading image failed" },
+        None => rsx! { "loading image..." },
     }
 }
 

examples/suspense.rs

@@ -50,7 +50,7 @@ fn app() -> Element {
 /// Suspense is achieved my moving the future into only the component that
 /// actually renders the data.
 fn Doggo() -> Element {
-    let fut = use_future(move || async move {
+    let mut fut = use_resource(move || async move {
         #[derive(serde::Deserialize)]
         struct DogApi {
             message: String,
@@ -63,7 +63,7 @@ fn Doggo() -> Element {
             .await
     });
 
-    match fut.value().read().as_ref() {
+    match fut.read().as_ref() {
         Some(Ok(resp)) => rsx! {
             button { onclick: move |_| fut.restart(), "Click to fetch another doggo" }
             div { img { max_width: "500px", max_height: "500px", src: "{resp.message}" } }