Performance MetaDataEditor Gallery Freezing when Starting to Drag Thumbnails

[thomaslow]

Related Issues:

• Metadata editor is slow to respond #4196

When dragging thumbnails in the gallery panel of the meta data editor, the browser freezes for a short while before the actual dragging starts. This freezing is related to two things:

1. if the thumbnail was not yet selected, it is now selected, which triggers a synchronization between the structure panel and gallery panel, which is slow
2. jquery-ui activates all droppable components (the little placeholder components that represent where a thumbnail can be dropped) and calculates position offsets to be able to detect where the thumbnail is dropped

This pull request deals with the second part only. You can test it by dragging an already selected thumbnail like so:

simplescreenrecorder-2022-04-29_13.14.00.mp4

The problem is related to the jquery-ui implementation itself. Apparently, the large number of droppable components inside the gallery panel causes a problem in the prepareOffsets method of jquery-ui. The main loop "droppablesLoop" contains statements that both adapt the DOM layout and measure the DOM layout for element positions (offsets). Because of that, the browser needs to re-calculate the current layout of the page multiple times while this loop is processed, which is very computationally expensive for large pages and causes a freeze of the browser.

This pull request injects a slight adaptation of this method into jquery-ui, such that the method is executed much more efficiently, and dragging thumbnails starts almost immediately.

simplescreenrecorder-2022-04-29_13.21.53.mp4

Drawbacks

Any updates to jquery-ui might break the adapted implementation of prepareOffsets. Of course, ideally, this change should be made upstream.