Suspense example with struct component (#3375)

* Add example for struct component context consumer

* Replace untested docs example with one from examples dir

Fixes #3351

examples/suspense/index.scss

@@ -10,10 +10,10 @@ html, body {
 .layout {
   height: 100vh;
   width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
+  display: grid;
+  justify-items: center;
   align-items: center;
+  grid-template-columns: 1fr 1fr;
 }
 
 .content {
@@ -69,3 +69,7 @@ button {
 
   color: rgb(100, 100, 100);
 }
+
+h2 {
+  text-align: center;
+}

examples/suspense/src/main.rs

@@ -1,13 +1,19 @@
 use web_sys::HtmlTextAreaElement;
 use yew::prelude::*;
 
+mod struct_consumer;
 mod use_sleep;
 
-use use_sleep::use_sleep;
+pub use use_sleep::use_sleep;
+
+#[derive(Debug, PartialEq, Properties)]
+struct PleaseWaitProps {
+    from: &'static str,
+}
 
 #[function_component(PleaseWait)]
-fn please_wait() -> Html {
-    html! {<div class="content-area">{"Please wait 5 Seconds..."}</div>}
+fn please_wait(props: &PleaseWaitProps) -> Html {
+    html! {<div class="content-area">{"Please wait 5 Seconds for "}{props.from}{" component to load..."}</div>}
 }
 
 #[function_component(AppContent)]
@@ -20,7 +26,7 @@ fn app_content() -> HtmlResult {
         let value = value.clone();
 
         Callback::from(move |e: InputEvent| {
-            let input: HtmlTextAreaElement = e.target_unchecked_into();
+            let input: HtmlTextAreaElement = e.target_unchecked_into::<HtmlTextAreaElement>();
 
             value.set(input.value());
         })
@@ -41,14 +47,21 @@ fn app_content() -> HtmlResult {
 
 #[function_component(App)]
 fn app() -> Html {
-    let fallback = html! {<PleaseWait />};
+    let fallback_fn = html! {<PleaseWait from="function" />};
+    let fallback_struct = html! {<PleaseWait from="struct" />};
 
     html! {
         <div class="layout">
             <div class="content">
-                <h1>{"Yew Suspense Demo"}</h1>
-                <Suspense fallback={fallback}>
-                    <AppContent />
+                <h2>{"  Yew Suspense Demo -- function component consumer"}</h2>
+                    <Suspense fallback={fallback_fn}>
+                        <AppContent  />
+                    </Suspense>
+            </div>
+            <div class="content">
+                <h2>{"Yew Suspense Demo -- struct component consumer"}</h2>
+                <Suspense fallback={fallback_struct}>
+                        <struct_consumer::AppContent />
                 </Suspense>
             </div>
         </div>

examples/suspense/src/struct_consumer.rs

@@ -0,0 +1,70 @@
+use web_sys::HtmlTextAreaElement;
+use yew::prelude::*;
+
+use crate::use_sleep;
+
+#[function_component]
+pub fn WithSleep<Comp>() -> HtmlResult
+where
+    Comp: BaseComponent<Properties = AppContentProps>,
+{
+    let sleep = use_sleep()?;
+    let sleep = Callback::from(move |_| sleep());
+    Ok(yew::virtual_dom::VChild::<Comp>::new(AppContentProps { resleep: sleep }, None).into())
+}
+
+#[derive(Debug, PartialEq, Properties)]
+pub struct AppContentProps {
+    pub resleep: Callback<()>,
+}
+
+pub type AppContent = WithSleep<BaseAppContent>;
+
+pub enum Msg {
+    ValueUpdate(String),
+    TakeABreak,
+}
+
+pub struct BaseAppContent {
+    value: String,
+}
+
+impl Component for BaseAppContent {
+    type Message = Msg;
+    type Properties = AppContentProps;
+
+    fn create(_ctx: &Context<Self>) -> Self {
+        Self {
+            value: "I am writing a long story...".to_string(),
+        }
+    }
+
+    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            Msg::ValueUpdate(v) => {
+                self.value = v;
+            }
+            Msg::TakeABreak => {
+                ctx.props().resleep.emit(());
+            }
+        };
+        true
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let oninput = ctx.link().callback(|e: InputEvent| {
+            let input: HtmlTextAreaElement = e.target_unchecked_into::<HtmlTextAreaElement>();
+            Msg::ValueUpdate(input.value())
+        });
+        let on_take_a_break = ctx.link().callback(|_| Msg::TakeABreak);
+        html! {
+            <div class="content-area">
+                <textarea value={self.value.clone()} {oninput}></textarea>
+                <div class="action-area">
+                    <button onclick={on_take_a_break}>{"Take a break!"}</button>
+                    <div class="hint">{"You can take a break at anytime"}<br />{"and your work will be preserved."}</div>
+                </div>
+            </div>
+        }
+    }
+}

website/docs/concepts/suspense.mdx

@@ -136,45 +136,11 @@ fn app() -> Html {
 ### Use Suspense in Struct Components
 
 It's not possible to suspend a struct component directly. However, you
-can use a function component as a [HOC](../advanced-topics/struct-components/hoc) to
-achieve suspense-based data fetching.
+can use a function component as a [Higher Order Component](../advanced-topics/struct-components/hoc)
+to achieve suspense-based data fetching.
 
-```rust ,ignore
-use yew::prelude::*;
-
-#[function_component(WithUser)]
-fn with_user<T>() -> HtmlResult
-where T: BaseComponent
-{
-    let user = use_user()?;
-
-    Ok(html! {<T {user} />})
-}
-
-#[derive(Debug, PartialEq, Properties)]
-pub struct UserContentProps {
-    pub user: User,
-}
-
-pub struct BaseUserContent;
-
-impl Component for BaseUserContent {
-    type Properties = UserContentProps;
-    type Message = ();
-
-    fn create(ctx: &Context<Self>) -> Self {
-        Self
-    }
-
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        let name = ctx.props().user.name;
-
-        html! {<div>{"Hello, "}{name}{"!"}</div>}
-    }
-}
-
-pub type UserContent = WithUser<BaseUserContent>;
-```
+The [suspense example in the Yew repository](https://github.com/yewstack/yew/tree/master/examples/suspense/src/struct_consumer.rs)
+demonstrates how to use.
 
 ## Relevant examples