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::); + 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 {} + } } } }