fix: revert dashboard changes causing performance regressions

vaadin · Sep 27, 2024 · a1368a4 · a1368a4
1 parent 7f0b377
commit a1368a4
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 10 deletions.
diff --git a/packages/dashboard/src/vaadin-dashboard.js b/packages/dashboard/src/vaadin-dashboard.js
@@ -213,9 +213,20 @@ class Dashboard extends ControllerMixin(DashboardLayoutMixin(ElementMixin(Themab
       this.__updateWrapper(wrapper, item);
 
       if (!wrapper.contains(document.activeElement)) {
-        // Insert the wrapper to the correct position inside the host element
-        const insertBeforeElement = previousWrapper ? previousWrapper.nextSibling : hostElement.firstChild;
-        hostElement.insertBefore(wrapper, insertBeforeElement);
+        if (previousWrapper) {
+          // Append the wrapper after the previous one if it's not already there
+          if (wrapper.previousElementSibling !== previousWrapper) {
+            previousWrapper.after(wrapper);
+          }
+        } else if (hostElement.firstChild) {
+          // Insert the wrapper as the first child of the host element if it's not already there
+          if (wrapper !== hostElement.firstChild) {
+            hostElement.insertBefore(wrapper, hostElement.firstChild);
+          }
+        } else {
+          // Append the wrapper to the empty host element
+          hostElement.appendChild(wrapper);
+        }
       }
       previousWrapper = wrapper;
 

diff --git a/packages/dashboard/src/widget-reorder-controller.js b/packages/dashboard/src/widget-reorder-controller.js
@@ -184,13 +184,18 @@ export class WidgetReorderController {
    * @private
    */
   __getDragContextElements() {
-    const items = getItemsArrayOfItem(this.draggedItem, this.host.items);
-    return [...this.host.querySelectorAll(WRAPPER_LOCAL_NAME)]
-      .filter(
-        (wrapper) =>
-          items && items.some((item) => itemsEqual(item, getElementItem(wrapper))) && wrapper.firstElementChild,
-      )
-      .map((wrapper) => wrapper.firstElementChild);
+    // Find the wrapper element representing the dragged item
+    const draggedItemWrapper = [...this.host.querySelectorAll(WRAPPER_LOCAL_NAME)].find((el) =>
+      itemsEqual(el.__item, this.draggedItem),
+    );
+    if (!draggedItemWrapper) {
+      return [];
+    }
+    // Find all child wrappers in the same parent container as the dragged item's wrapper and
+    // return their first children (the actual widgets or sections)
+    return [...draggedItemWrapper.parentElement.children]
+      .filter((el) => el.localName === WRAPPER_LOCAL_NAME && el.firstElementChild)
+      .map((el) => el.firstElementChild);
   }
 
   /** @private */