From 648be8ba72412113f043d42118468320e04d53b2 Mon Sep 17 00:00:00 2001
From: Adrien <me@adrien.run>
Date: Sat, 7 Sep 2024 13:01:26 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Add=20tail=20div=20to=20dynamic?=
 =?UTF-8?q?=20conversation=5Fpanels=20to=20fix=20some=20side=20effects?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/ui/layouts/conversations.rs | 42 +++++++++++++++++++++++----------
 1 file changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/ui/layouts/conversations.rs b/src/ui/layouts/conversations.rs
index 62f7eff..58972a4 100644
--- a/src/ui/layouts/conversations.rs
+++ b/src/ui/layouts/conversations.rs
@@ -100,6 +100,16 @@ fn LayoutSmall() -> Element {
         }
     }
 
+    // Add tail div to dynamic rendered conversation_panels avoids side effects on layout changes
+    conversation_panels.push(
+        rsx! {
+            div {
+                class: ClassName::CONVERSATIONS_VIEW_TAIL,
+            }
+        }
+        .unwrap(),
+    );
+
     rsx! {
         style { {STYLE_SHEET} }
 
@@ -142,6 +152,9 @@ fn LayoutSmall() -> Element {
             }
 
             {conversation_panels.iter()}
+        }
+    }
+}
 
 #[component]
 fn Tab(room_id: RoomId) -> Element {
@@ -246,6 +259,16 @@ fn LayoutBig() -> Element {
         }
     }
 
+    // Add tail div to dynamic rendered conversation_panels avoids side effects on layout changes
+    conversation_panels.push(
+        rsx! {
+            div {
+                class: ClassName::CONVERSATIONS_VIEW_TAIL,
+            }
+        }
+        .unwrap(),
+    );
+
     rsx! {
         style { {STYLE_SHEET} }
 
@@ -292,10 +315,6 @@ fn LayoutBig() -> Element {
                     }
 
                     {conversation_panels.iter()}
-
-                    div {
-                        class: ClassName::CONVERSATIONS_VIEW_TAIL,
-                    }
                 }
             }
         }
@@ -303,7 +322,7 @@ fn LayoutBig() -> Element {
 }
 
 pub fn Conversations() -> Element {
-    let mut layout = use_signal(|| None::<VNode>);
+    let mut use_big_layout = use_signal(|| false);
 
     rsx! {
         style { {STYLE_SHEET} }
@@ -317,21 +336,20 @@ pub fn Conversations() -> Element {
 
             onresize: move |cx| {
                 let data = cx.data();
-                let mut use_big_layout = false;
 
                 if let Ok(size) = data.get_border_box_size() {
                     // Use LayoutBig if the layout can contain 2 panels side by side
                     let component_width = size.height * INNER_PANEL_HEIGHT_RATIO * ASPECT_RATIO;
                     let breakpoint_width = component_width * 2_f64;
-                    use_big_layout = size.width > breakpoint_width;
+                    use_big_layout.set(size.width > breakpoint_width);
                 }
-
-                // let layout_result = rsx! { if use_big_layout { LayoutBig {} } else { LayoutSmall {} }};
-                let layout_result = rsx! { LayoutBig {} };
-                layout.set(Some(layout_result.unwrap()));
             },
 
-            {layout}
+            if use_big_layout() {
+                LayoutBig {}
+            } else {
+                LayoutSmall {}
+            }
         }
     }
 }