Outro transition gets interrupted when mutating array

[0Abdullah]

Describe the bug

mutating an array in Svelte 5 causes the outro animation to end abruptly and the element to be removed immediately from the DOM.

in Svelte 4 it works correctly: REPL

Reproduction

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACm1RwWrdMBD8lUUtxA7m-eXQi-v3oJfcQkKaW5yDaq1jUVky0iptEPr3ohVt09CLjWZnZmd3k1i0wSCGxySs3FAM4su-i07Q614e4QUNoehEcNHPBRnD7PVO58lO1F9C-U30lWnwCW4jwYOXNmjSzsI97t6pOJfHoVIf_CvsMazaPoOEBX-AJtwCSKuAVrTgcXMvXLVc6ipcNL8htrrsy1dvu_MECRapEDIs3m1wUWP39CfJxWfubicySGB0IDjBx0CSsHl8akvVTrREy1G5WdNCqpEL_cBQAq0GuJG0Hry0ym1N2wHhTxrY82DQPtMKuS3C_M6UB8Nr7QO98w670TM2xw6uOEqRjv3fRdvxWyRyFpydjZ6_n1JJk_kGd2Uv6U131lb--T_KNymqwT0DwAhv9x_9ZMdomJc-oJzXujsZmAkNX0OrNtdpRqPBRRrKMU4pgYpeltkHuDoej5DzObGirCyPvdHVuS_OnDuas-jE5pReNCoxkI-Yn_Ivj4K48acCAAA=

Logs

No response

System Info

irrelevant

Severity

annoyance

[garikAsplund]

Has this been solved? When I try it in each of the provided links I can't spot a difference. Or maybe I'm doing it wrong? I'm just clicking the buttons to manipulate the array, but keep getting the expected behavior with transitions.

[trueadm]

So digging into this more, the issue is:

https://github.com/sveltejs/svelte/blob/main/packages/svelte/src/internal/client/reactivity/effects.js#L485-L486

When we remove the first item, that row because inert. When we add a new row we reconcile again, but the first item is still flagged for removal again, so we try to pause it again. However, as it's now inert, we don't add it to the transition array and just wipe it instantly without waiting for it.

[0Abdullah]

@trueadm thanks for the quick fix! although the issue still occurs when mutating an empty array (adding elements to the array once it's empty or just setting array = [] still interrupts the transitions)

repro: https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACm1RS0_EIBD-KxM0cWuadj14qd1NPHowGvW23QO2U0uk0MDgI4T_boCN7wsE5nvMN-PZKCRa1uw8U3xG1rDLZWElo_clPuwLSkJWMqud6eNPa3sjFtp2qqP6FOLV0X2CwTncOIIHw5UVJLSCO1yMHlwfH1WGPph36KXon4V6ApoQOnaHs35B4FKCIJxtx-DREWkV6woWZ6cI5iqVy8SiTxMLr0JK4I_a0MHjxmSL_7XpVfSYkKd1PMW8aEPgYeQDQoDR6BlOcvL6y-fkIomrjiQSSGEJNnBsiROudvsiVlVHo1Mpbep6VYDPHUV4lb48iKGBa05TZbga9LwqSiB8oyZpVhLVE00QikgMv0RNSnMp5VXM8lMeNrDbXxxYbf21JtUepqlVmsrGx0ZC2uCtsxP4b8aJm_Hbf5g_G8gaf0b8XaFTrZMJ5o-Q91MeHLcJCqt4VmIoQs7RSgHaURM3sfEeBmd4DN7A2Xq9hhC2PjHivEJbS5GV66icOndyy0o260GMAgfWkHEY9uEDWnG_IOcCAAA=