Element switching order

[futursolo]

Problem

When running the following example, the element is switching order.

I have found this issue occurring sporadically since v0.18.
Usually minor tweaking to html! layout would solve this so I haven't taken time to make a minimal example until now.

Steps To Reproduce

Run this following example:

use gloo_timers::future::sleep;
use std::time::Duration;
use wasm_bindgen_futures::spawn_local;
use yew::prelude::*;

#[function_component(Top)]
fn top() -> Html {
    let loaded = use_state_eq(|| false);

    {
        let loaded = loaded.clone();
        use_effect_with_deps(
            move |_| {
                spawn_local(async move {
                    sleep(Duration::from_millis(1000)).await;
                    loaded.set(true);
                });
                || {}
            },
            (),
        );
    }

    if *loaded {
        html! { <>{"<Top />"}</> }
    } else {
        html! {<div>{"<Top (loading...) />"}</div>}
    }
}

#[function_component(Bottom)]
pub(crate) fn bottom() -> Html {
    let loaded = use_state_eq(|| false);

    use_effect_with_deps(
        move |_| {
            spawn_local(async move {
                sleep(Duration::from_millis(100)).await;
                loaded.set(true);
            });
            || {}
        },
        (),
    );

    html! {<div>{"<Bottom />"}</div>}
}

#[function_component(App)]
pub(crate) fn app() -> Html {
    let loaded = use_state_eq(|| false);

    use_effect_with_deps(
        move |_| {
            loaded.set(true);

            || {}
        },
        (),
    );

    html! {
        <div>
            <Top />
            <Bottom />
        </div>
    }
}

fn main() {
    yew::start_app::<App>();
}

Expected behavior

<Top />
<Bottom />

Screenshots

example.mov

Environment:

• Yew version: master
• Rust version: 1.58
• Target, if relevant: wasm32-unknown-unknown
• Build tool, if relevant: not relevant
• OS, if relevant: not relevant
• Browser and version, if relevant: not relevant

Questionnaire

• I'm interested in fixing this myself but don't know where to start
• I would like to fix and I have a solution
• I don't have time to fix this right now, but maybe later

[siku2]

Does the issue occur if you add keys to the list in the app component?

[futursolo]

Does the issue occur if you add keys to the list in the app component?

Yes. I added key={1} to top and key={2} to bottom and it's still occurring.

[WorldSEnder]

This might have been fixed by #2330 , at least I can't reproduce this locally with yew@master.