Lag spike when adding many droppables

[zzzachzzz]

I have a scenario where upon beginning a drag operation, several new drop targets containing createDroppable are created and rendered. What I'm building is a drag and drop grid, where each cell in the grid is a drop target. Upon beginning a drag, the grid size grows +1 in rows and columns. So a 10x10 grid would grow to 11x11, resulting in 21 new cells (drop targets) being rendered.

Lag starts to get more noticeable at around a 21x21 growing to 22x22 (43 new cells / drop targets). For clarity, the lag is specifically noticeable for the item being dragged, it takes a sec to catch up only at the beginning of the drag when the new droppable cells are created. I should also note that I have skipTransform: true for all my draggables & droppables. The "transform" that I do is simply moving an item to a new cell on drag over.

I'm not very good at using the Chrome performance profiler, but from what I could gather, it seems that the lag is coming from the repeated recomputeLayouts calls, which I believe is happening for every new droppable cell.

Is there anything I can do about this? Am I going about this the wrong way?

Call Tree:

Bottom-Up:

[martinpengellyphillips]

If a drag is active whilst adding droppables then recomputeLayouts is called each time for every existing droppable (as you suspected). This is because solid-dnd needs to know whether that change caused any layout shift. You can see that here:

solid-dnd/src/drag-drop-context.tsx

Line 398 in e714e22

recomputeLayouts();

I imagine that would be the cause of the lag for you. If you can share a reproducible example (e.g. codesandbox) then I can look at ways to optimise this use case (e.g. it might be an option to let you control when to recompute layouts, or we might be able to use an intersection observer for increased performance).

Aside: skipTransform likely has little impact here - that is more about controlling whether to auto set the transform when using the "directive" form.

[zzzachzzz]

Thank you for your attention to this. Here's the repro example:
CodeSandbox: https://codesandbox.io/s/github/zzzachzzz/solid-dnd_repro-issue-73
GitHub repo: https://github.com/zzzachzzz/solid-dnd_repro-issue-73