Detached dom nodes increases with Transition + Suspense

[huang-julien]

Vue version

3.5.13

Link to minimal reproduction

https://github.com/huang-julien/vue-transition-suspense-repro
https://stackblitz.com/github/huang-julien/vue-transition-suspense-repro?file=README.md

Steps to reproduce

• open chrome devtools -> performance monitor
• check DOM nodes (+ JS heap size)
• click on swap button a lot of times
• see that DOM Nodes increases and never get flushed. You can also profile the detached elements in the memory tab of the chrome devtools

What is expected?

DOM Nodes should be flushed

What is actually happening?

It seems like DOM Nodes are kept in a pending branch of Suspense.

We also have this issue with nuxt's pages when enabling transitions. Curiously, JS heap mem seems to flush correctly.

System Info

Any additional comments?

original issue: nuxt/nuxt#30718