Sortable issues with flickering and performance

[willjstevens]

Hello, great library and thank you. I am running into a few issues with the examples and expanding on them.

1. In following the DragOverlay example here, the DragOverlay causes flickering after dropping the item and on the re-render. I have copied the code into the same three files and get this effect. Note, this is a different flickering than in issue Flickering with DragOverlay after drop animation finished #304 . However, when I remove the DragOverlay node and the ref forwarding element (Item) then it works fine with no flickering. I understand the reasons for using the overlay for if the contents are outside the viewport but am trying to determine if this component is necessary. Is this really needed for 'normal' dnd behavior of elements? Why the flickering when using the DragOverlay?
2. Even with a memoized wrapper as recommended in Performance issues vs react-sortable-hoc #600 , performance in my list seems to be severely degrading around the 50-item count. Degrading meaning, there is hesitance or delay when dragging the item around. I tried dropping in a VirtualList like in the story, and then it lost all dragging animation and am straying away from that if possible. Can I expect the list to handle up to ~200 items with no issues or, do you have any recommendations?

Thank you.

[willjstevens]

Regards to the flickering with #1 above - I narrowed this down to the dropAnimation property in the 'DragOverlay' element. Or rather, the absence of it. If I include only the property with no value overrides on easing, duration or opacity, it works fine with no flickering. Additionally adding overrides like demo'd in the docs. But the absence or removal causes the flickering.

Going deeper, looking at the library source, I see the following in useDropAnimation.d.ts which contains the dropAnimation definition and defaults:

export interface DropAnimation { duration: number; easing: string; dragSourceOpacity?: number; }

These are the defaults, loaded into the defaultDropAnimation property passed to my dropAnimation property in the DragOverlay component. So, the primitive type defaults help it to work.

This leads me to believe somewhere else, either the absence of these defaults, or having null or undefined is causing the flickering.

[flexa-david]

Very helpful - used the dropAnimation configuration of defaultDropAnimationSideEffects as used in the vertical sort storybook example and the drop flicker stopped