From f5058bd54af8ae8b69c5b429fe354ab0d32229f1 Mon Sep 17 00:00:00 2001
From: mathieu <mathieubourbon49@gmail.com>
Date: Sat, 16 May 2026 10:12:30 +0200
Subject: [PATCH] fix(host-detail): switch host resource to LocalResource to
 fix hydration mismatch

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/client/host_detail.rs | 36 +++++++++++++++++++-----------------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/client/host_detail.rs b/src/client/host_detail.rs
index 8587f59..9f52426 100644
--- a/src/client/host_detail.rs
+++ b/src/client/host_detail.rs
@@ -255,18 +255,17 @@ pub fn HostDetailPage() -> impl IntoView {
         }
     });
 
-    // Reload host detail after any mutation.
-    let host = Resource::new(
-        move || (
-            host_id(),
-            update_action.version().get(),
-            add_port_action.version().get(),
-            remove_port_action.version().get(),
-            add_app_action.version().get(),
-            remove_app_action.version().get(),
-        ),
-        |(id, _, _, _, _, _)| get_host_detail(id),
-    );
+    // LocalResource avoids reading the resource outside <Suspense> during hydration,
+    // which would cause a mismatch between the SSR-rendered fallback and the content
+    // the WASM expects to find after the resource resolves.
+    let host = LocalResource::new(move || {
+        let _ = update_action.version().get();
+        let _ = add_port_action.version().get();
+        let _ = remove_port_action.version().get();
+        let _ = add_app_action.version().get();
+        let _ = remove_app_action.version().get();
+        get_host_detail(host_id())
+    });
 
     // Networks dropdown — LocalResource avoids SSR/hydration mismatch.
     let networks_res = LocalResource::new(|| get_networks());
@@ -286,11 +285,14 @@ pub fn HostDetailPage() -> impl IntoView {
     let new_port   = RwSignal::new(String::new());
 
     // Sync edit signals whenever fresh host data arrives.
+    // LocalResource wraps its value in SendWrapper, so we dereference with `*r`.
     Effect::new(move |_| {
-        if let Some(Ok(ref detail)) = host.get() {
-            name_sig.set(detail.name.clone());
-            ip_sig.set(detail.ip.clone());
-            net_id_sig.set(detail.network_id);
+        if let Some(r) = host.get() {
+            if let Ok(ref detail) = *r {
+                name_sig.set(detail.name.clone());
+                ip_sig.set(detail.ip.clone());
+                net_id_sig.set(detail.network_id);
+            }
         }
     });
 
@@ -304,7 +306,7 @@ pub fn HostDetailPage() -> impl IntoView {
     view! {
         <div class="host-detail-page">
             <Suspense fallback=|| view! { <p class="empty">"Loading host…"</p> }>
-                {move || host.get().map(|result| match result {
+                {move || host.get().map(|r| match (*r).clone() {
                     Err(e) => view! {
                         <p class="error">"Could not load host: " {e.to_string()}</p>
                     }.into_any(),