MC-4014: PageBuilder Performance Is Bad With Minimal Content

- Fix issue with sorting slide items

Author: davemacaulay

app/code/Magento/PageBuilder/view/adminhtml/web/js/binding/sortable-children.js

@@ -32,48 +32,46 @@ ko.bindingHandlers.sortableChildren = {
         const instance: ContentTypeCollectionInterface = context.$data.parent;
         const options: JQueryUI.SortableOptions = ko.unwrap(valueAccessor());
         let originalPosition: number;
-        _.defer(() => {
-            $(element).sortable(options)
-                .on("sortstart", (event: Event, ui: JQueryUI.SortableUIParams) => {
-                    originalPosition = ui.item.index();
-                    draggedContentType = instance.children()[originalPosition] as ContentTypeCollectionInterface;
-                    events.trigger("childContentType:sortStart", {
-                        instance,
-                        originalPosition,
-                        ui,
-                    });
-                })
-                .on("sortstop", (event: JQueryEventObject, ui: JQueryUI.SortableUIParams) => {
-                    events.trigger("childContentType:sortStop", {
-                        instance,
-                        ui,
-                        originalPosition,
-                    });
-                })
-                .on("sortupdate", function(event: JQueryEventObject, ui: JQueryUI.SortableUIParams) {
-                    if (this === ui.item.parent()[0]) {
-                        const index = ui.item.index();
-                        const targetParent = ko.dataFor(ui.item.parent()[0]).parent;
-                        if (targetParent &&
-                            (originalPosition !== index || draggedContentType.parent !== targetParent)
-                        ) {
-                            ui.item.remove();
-                            if (draggedContentType.parent === targetParent) {
-                                moveArrayItem(instance.children, originalPosition, index);
-                            } else {
-                                moveContentType(draggedContentType, index, targetParent);
-                            }
-                            events.trigger("childContentType:sortUpdate", {
-                                instance,
-                                newPosition: index,
-                                originalPosition,
-                                ui,
-                                event,
-                            });
+        $(element).sortable(options)
+            .on("sortstart", (event: Event, ui: JQueryUI.SortableUIParams) => {
+                originalPosition = ui.item.index();
+                draggedContentType = instance.children()[originalPosition] as ContentTypeCollectionInterface;
+                events.trigger("childContentType:sortStart", {
+                    instance,
+                    originalPosition,
+                    ui,
+                });
+            })
+            .on("sortstop", (event: JQueryEventObject, ui: JQueryUI.SortableUIParams) => {
+                events.trigger("childContentType:sortStop", {
+                    instance,
+                    ui,
+                    originalPosition,
+                });
+            })
+            .on("sortupdate", function(event: JQueryEventObject, ui: JQueryUI.SortableUIParams) {
+                if (this === ui.item.parent()[0]) {
+                    const index = ui.item.index();
+                    const targetParent = ko.dataFor(ui.item.parent()[0]).parent;
+                    if (targetParent &&
+                        (originalPosition !== index || draggedContentType.parent !== targetParent)
+                    ) {
+                        ui.item.remove();
+                        if (draggedContentType.parent === targetParent) {
+                            moveArrayItem(instance.children, originalPosition, index);
+                        } else {
+                            moveContentType(draggedContentType, index, targetParent);
                         }
+                        events.trigger("childContentType:sortUpdate", {
+                            instance,
+                            newPosition: index,
+                            originalPosition,
+                            ui,
+                            event,
+                        });
                     }
-                });
-        });
+                }
+            });
     },
 };