Fast sorting on with optimistic updates while saving to server is broken

[mwhnrt]

Moving items fast on the "Svelte dnd action - saving to a 'server' with optimistic updates and recovery from failed operations" example sometimes breaks the whole list by removing items.

each_key_duplicate.mov

This goes aloing with a Uncaught Svelte error: each_key_duplicate error and is possibly related to handling an error response from the faked server:

For it being easier to reproduce I just disabled the alert() when the "server" fails. Here's my playground which is directly forked from the example without any further changes: https://svelte.dev/playground/7a5c54b988734e478b41b4e947bcc06a?version=5.17.4

I originally discovered this bug in our application but found the same happens with the basic example here.

System:
macOS 14.6.1 (23G93)
Chrome 131.0.6778.265

[isaacHagoel]

Hi @mwhnrt ,
from a brief look it seems like the source of the issue is the naive implementation of saving to the server. It doesn't account for multiple updates at the same time.
The disappearing item and console.error seem to be separate issues (I could reproduce one without the other).
A naive temp solution would be to disable drag while there is an update in flight using the dragDisabled prop.
I will make some time this week to look into this in more depth and update.

[isaacHagoel]

mmm.. i discovered something strange.
@mwhnrt Can you reproduce the bug on this REPL https://svelte.dev/playground/6bdbaa13e781482084119946dabd4228?version=5.18.0 ?
I made a tiny change that was supposed to be a preparation for the actual solution but it made the problem go away for me.

[mwhnrt]

@isaacHagoel just tested it and I wasn't able to reproduce the issue either. Also the errors from the console are gone. 🎉

What has been changed?

[isaacHagoel]

Lol. Now I will need to figure out why it works. I will close the issue after I update the official example.

…

On Thu, Jan 16, 2025, 21:16 mwhnrt ***@***.***> wrote: @isaacHagoel <https://github.com/isaacHagoel> just tested it and I wasn't able to reproduce the issue either. Also the errors from the console are gone. 🎉 — Reply to this email directly, view it on GitHub <#625 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE4OZC6N4PBC4S4HKEAJPOL2K6BJDAVCNFSM6AAAAABVEU7QLWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKOJVGEYTONRSGM> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[isaacHagoel]

Ah okay, it doesn't actually work. it just doesn't revert when the server fails. Okay. I will keep investigating in the original direction.

[isaacHagoel]

okay, now it reverts and I can't reproduce the issue.
https://svelte.dev/playground/6bdbaa13e781482084119946dabd4228?version=5.18.0
the logic of mid drag updates was making an assumption that was correct with some older versions of the lib (that the shadow item retains a temp id throughout the drag).
@mwhnrt Can you please test?

[mwhnrt]

@isaacHagoel sorry to say, I can still reproduce the bug. Took a while, but after some time dragging the items one disappeared.

[isaacHagoel]

I will look into disappearing item but the console error is solved, Correct?

…

On Fri, Jan 17, 2025, 10:57 mwhnrt ***@***.***> wrote: @isaacHagoel <https://github.com/isaacHagoel> sorry to say, I can still reproduce the bug. Took a while, but after some time dragging the items one disappeared. Screenshot_2025-01-17-00-54-25-669_com.android.chrome.jpg (view on web) <https://github.com/user-attachments/assets/121eff30-b690-4d9f-86cd-486098e16536> — Reply to this email directly, view it on GitHub <#625 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE4OZCY24YIN6PJN35ROJX32LBBNPAVCNFSM6AAAAABVEU7QLWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKOJXGE2DMOJQGA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[isaacHagoel]

just an update. The item doesn't disappear. If you inspect the DOM you'll see that it's there. There problem is that it stays with the styling of the shadow item (but without the attribute that marks it as the shadow item in the 'items' list). Next step is to figure out the exact race condition that causes it.

[isaacHagoel]

I fixed the issue (in version 0.9.55) and updated the official example.
The console error was a bug in the example logic as stated before.
The "disappearing" item (shadow item that wasn't made visible) was a subtle library bug.
@mwhnrt If you can still reproduce any of these issues (or see any other issues) please re-open this issue.
Thanks for reporting.

[mwhnrt]

Thanks @isaacHagoel will test that tomorrow!