Fix hydration mismatch in CallPanel that crashed room switching
The SSR branch rendered an empty call-panel div while the hydrate branch expected a child button node. On any full load/refresh of the lobby room, the mismatched hydration cursor hit tachys's unreachable!() panic path, trapping the wasm instance and killing all reactivity (routing, room switching, SSE) for the rest of the page load, while the already-rendered SSR HTML stayed visually intact. SSR now renders the same default join-button markup hydrate expects.
This commit is contained in:
+13
-1
@@ -495,10 +495,22 @@ fn CallPanel(room: Memo<String>, me: String) -> impl IntoView {
|
|||||||
}
|
}
|
||||||
.into_any()
|
.into_any()
|
||||||
}
|
}
|
||||||
|
// Must mirror the hydrate branch's default (not-in-call) markup exactly -
|
||||||
|
// hydration reconciles this SSR output against what the hydrate branch
|
||||||
|
// above expects to find, and an empty div here (vs. the button hydrate
|
||||||
|
// wants) is a hydration mismatch that panics and traps the whole wasm
|
||||||
|
// instance, killing all reactivity on the page.
|
||||||
#[cfg(not(feature = "hydrate"))]
|
#[cfg(not(feature = "hydrate"))]
|
||||||
{
|
{
|
||||||
let _ = (room, me);
|
let _ = (room, me);
|
||||||
view! { <div class="call-panel"></div> }.into_any()
|
view! {
|
||||||
|
<div class="call-panel">
|
||||||
|
<button class="call-join" disabled=true>
|
||||||
|
"☎ join call"
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
.into_any()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user