Hydration error when multiple islands are nested inside a Transition

[spencewenski]

Describe the bug
I'm getting a hydration error, but only in a very specific configuration of island/Transition/Suspend. See the code in the folded section below for more details.

Code pasted here:

/// Minimal reproduction of a hydration error.
///
/// Error:
///
/// ```plaintext
/// A hydration error occurred while trying to hydrate an element defined at src/lib.rs:79:10.
///
/// The framework expected an HTML <div> element, but found this instead:  
/// #text "Bar"
///     ...
///     parentElement: <div>
///     ...
///
/// The hydration mismatch may have occurred slightly earlier, but this is the first time the framework found a node of an unexpected type.
/// ```
///
/// Note the following:
/// - Parent (`Foo`) is an island
///     - Issue does not repro if `Foo` is a component
/// - Parent contains a `Transition` with a view rendered in a `Suspend`
///     - Issue does not repro if `Bar` and `Baz` are not in a `Transition` + `Suspend`
/// - `Suspend`'s view contains two islands
///     - Issue does not repro if only `Bar` is present
///     - Issue does not repro if either or both of `Bar`/`Baz` are components
///
/// Interestingly, and possibly related, the error is different if `Bar`/`Baz` are replaced with `Bar2`/`Baz2`:
///
/// ```plaintext
/// panicked at /home/spencer/code/leptos/tachys/src/html/mod.rs:188:14:
/// called `Option::unwrap()` on a `None` value
/// ```
#[island]
fn Foo() -> impl IntoView {
    view! {
        <Transition>
            {move || Suspend::new(async move {
                    view! {
                        <Bar/>
                        <Baz/>
                        // <Bar2/>
                        // <Baz2/>
                    }
            })}
        </Transition>
    }
}

#[island]
fn Bar() -> impl IntoView {
    view! {
        <div>"Bar"</div>
    }
}

#[island]
fn Baz() -> impl IntoView {
    view! {
        <div>"Baz"</div>
    }
}

#[island]
fn Bar2() -> impl IntoView {
    view! {
        <div><p>"Bar2"</p></div>
    }
}

#[island]
fn Baz2() -> impl IntoView {
    view! {
        <div><p>"Baz2"</p></div>
    }
}

The repro code is also available here in the hackernews_islands_axum example: spencewenski@b40a8b6

To Reproduce
Steps to reproduce the behavior:

1. Run the hackernews_islands_axum example from spencewenski@b40a8b6
2. Open the devtools and observe the hydration error log

Expected behavior
No hydration error should occur

Screenshots

[gbj]

#3424 should fix this -- let me know if it works for your actual use case. The root cause was issues with any islands that were created inside a closure, inside another island.

[spencewenski]

Awesome! I pulled down the branch for #3424 and the hydration error does not occur anymore. Thanks, @gbj! 🎉