Odd warnings when using Transition inside a "parent" element.

[dev-inigmas]

Describe the bug

Odd warnings are being generated when using Transition|Suspense inside of a "parent" element; such as: <ul> or <tbody>.

Example warning:

[WARNING] Non-fatal error at ... while calling insertNode on

<ul class=​"flex-auto mx-3 divide-y shadow-sm shadow-black divide-zinc-900/​20 dark:​divide-zinc-100/​20 bg-zinc-200 dark:​bg-zinc-900 sm:​rounded-xl overflow-y-auto overflow-x-hidden" role=​"list">​
<li class=​"flex items-center justify-between p-2 gap-x-6">​…​</li>
<li class=​"flex items-center justify-between p-2 gap-x-6">​…​</li>​
<li class=​"flex items-center justify-between p-2 gap-x-6">​…​</li>​
<li class=​"flex items-center justify-between p-2 gap-x-6">​…​</li>​
<li class=​"flex items-center justify-between p-2 gap-x-6">​…​</li>​
<li class=​"flex items-center justify-between p-2 gap-x-6">​…​</li>​
<li class=​"flex items-center justify-between p-2 gap-x-6">​…​</li>​
<li class=​"flex items-center justify-between p-2 gap-x-6">​…​</li>​
<li class=​"flex items-center justify-between p-2 gap-x-6">​…​</li>​
<li class=​"flex items-center justify-between p-2 gap-x-6">​…​</li>​
<li class=​"flex items-center justify-between p-2 gap-x-6">​…​</li>​
<li class=​"flex items-center justify-between p-2 gap-x-6">​…​</li>​
<li class=​"flex items-center justify-between p-2 gap-x-6">​…​</li>​
<!---->
</ul>

DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

Code that produced the warnings:

view! {
  <NavigatorList title="Registered Flows">
    <Transition
      fallback=move || view! { <CardListItem>"Loading..."</CardListItem> }
    >
      <For
        each=move || {
          flows_rsrc.get()
            .and_then(Result::ok)
            .unwrap_or_default()
            .into_iter()
        }
        key=|flow| flow.id
        children=|flow| view! { <FlowItem flow /> }
      />
    </Transition>
  </NavigatorList>
}

Code that does not produce warnings:

view! {
  <Transition
    fallback=|| view! {
      <NavigatorList title="Registered Flows">
        <CardListItem>"Loading..."</CardListItem>
      </NavigatorList>
    }
  >
    <NavigatorList title="Registered Flows">
      <For
        each=move || {
          flows_rsrc.get()
            .and_then(Result::ok)
            .unwrap_or_default()
            .into_iter()
        }
        key=|flow| flow.id
        children=|flow| view! { <FlowItem flow /> }
      />
    </NavigatorList>
  </Transition>
}

Another example where warnings were fixed by putting the "parent" element inside of the Transition:

view! {
  <Transition
    fallback=|| view! {
      <tbody>
        <TableList>
          <td colspan="4">"Loading notificatons..."</td>
        </TableList>
      </tbody>
    }
  >{ move || {
    let notifs = memoize_res_list(notif_res, |s| s.id);
    view! {
      <tbody>
        <For
          each=move || notifs.get()
          key=|(id, _)| *id
          children=|(_, notif)| view! { <NotifItem notif /> }
        />
      </tbody>
    }
  }}</Transition>
}

Before, the component with this view! was being called from within a tbody.

Leptos Dependencies

Please copy and paste the Leptos dependencies and features from your Cargo.toml.

For example:

leptos        = { version="0.7.1", features=["nightly"] }
leptos_axum   = { version="0.7.1" }
leptos_meta   = { version="0.7.1" }
leptos_router = { version="0.7.1", features=["nightly"] }

To Reproduce

See reproduction: https://github.com/dev-inigmas/leptos_3385

Within an app with SSR+Hydration and Routing. Reload the app (F5), navigate to a route with the effected code such that it's client-side rendered. Not sure if a CSR-only app does this also.

<ParentElement> // tested ul and tbody so far
  <Transition>
    <For ...>
      <ChildElement /> // tested li and tr so far
    </For>
  </Transition>
</ParentElement>

Expected behavior

I didn't expect having the "parent" element outside of the Transition|Suspense to cause tons of warning to pop up in the console. Other than that - I haven't discovered any odd side-effects yet.

Screenshots

Additional context
Thanks.

If a minimal example project is needed, please let me know.

[gbj]

Please include a minimal reproduction: i.e., a small, self-contained example that compiles as is, without requiring other code from your project, and reproduces the bug.

[gbj]

Oh and just to clarify: Does the app work as expected (but emits warnings), or is there a bug in actual behavior (other than the warnings)?

[dev-inigmas]

yeah - just a bunch of strange warnings filling up the console. I can work on a minimal example soon. Thanks.

[dev-inigmas]

https://github.com/dev-inigmas/leptos_3385