I'm getting a visual flicker when reordering items in a Sortable List component.

[GlacierFox]

Hi, got a bit of a strange problem here and I'm not sure if it's a bug or something on my end so I've submitted here rather than create an issue. I've been making use of the Sortable List component for a Kanban tool I've been making. I'm getting a flicker when sorting items and can't seem to get rid of it.

I assumed it was due to the way I was calculating the sort order so I've literally lifted the exact code from the demo site and place it into one of my pages and even that is giving me the same problem. I've tried it in multiple different pages too.

I thought it may be something to do with my set-up so I cloned the repo for this project and built it and to my suprise its working smoothly and fine. It also works fine on the demo site online.

Here's a video of the Sortable List as it is in my project.

ReorderPersonal.mp4

The frame rate of the video sort of hides it but as you can see, when I move the items up and down, the items which switch positions briefly flash back to their initial values before switching. This is using the exact same code as on the site so I can't get it to work properly in my own separate lists either.

Here's a video of me doing the same thing after cloning this repo and building the project. As you can see, it works fine, really smooth and no flicking back. I'm using the exact same code lifted from the site in both instances.😕

ReorderDemo.mp4

EDIT: Just placed one in a fresh Blazor Web app and it's flickering in that too.

Here's a link to the simple repo here

On a basic level I know what's going on. The list itself is taking a little bit of time to update when I drop an item into its new position. Perhaps it's the way the component is integrated into the demo site as it seems different to the instructions specified in the docs. (There's no sortable.js in the App.razor for example). But how come it's working on the demo site and not working properly in actual projects?