MC-4014: PageBuilder Performance Is Bad With Minimal Content

- Inform the domObserver to ignore the Page Builder canvas node and child nodes

Author: davemacaulay

app/code/Magento/PageBuilder/view/adminhtml/web/js/stage.js

@@ -7,6 +7,7 @@ import ko from "knockout";
 import $t from "mage/translate";
 import events from "Magento_PageBuilder/js/events";
 import "Magento_PageBuilder/js/resource/jquery/ui/jquery.ui.touch-punch.min";
+import domObserver from "Magento_Ui/js/lib/view/utils/dom-observer";
 import alertDialog from "Magento_Ui/js/modal/alert";
 import _ from "underscore";
 import "./binding/sortable";
@@ -85,7 +86,10 @@ export default class Stage {
     /**
      * The stage has been initiated fully and is ready
      */
-    public ready() {
+    public ready([buildResults, canvasElement]: [any[], HTMLElement]) {
+        // Disable the dom observer from running on our canvas
+        domObserver.disableNode(canvasElement);
+
         events.trigger(`stage:${ this.id }:readyAfter`, {stage: this});
         this.loading(false);
         this.initListeners();

app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/stage.ts

@@ -0,0 +1,45 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+export interface DomObserver {
+    /**
+     * Disable a node from being observed by the mutations
+     *
+     * @param {HTMLElement} node
+     */
+    disableNode(node: HTMLElement): void;
+
+    /**
+     * Adds listener for the appearance of nodes that matches provided
+     * selector and which are inside of the provided context. Callback will be
+     * also invoked on elements which a currently present.
+     *
+     * @param {String} selector - CSS selector.
+     * @param {Function} callback - Function that will invoked when node appears.
+     * @param {HTMLElement} [ctx=document.body] - Context inside of which to search for the node.
+     */
+    get(selector: string, callback: () => void, ctx: HTMLElement): void;
+
+    /**
+     * Adds listener for the nodes removal.
+     *
+     * @param {(jQueryObject|HTMLElement|Array|String)} selector
+     * @param {Function} callback - Function that will invoked when node is removed.
+     * @param {HTMLElement} [ctx=document.body] - Context inside of which to search for the node.
+     */
+    remove(selector: string, callback: () => void, ctx: HTMLElement): void;
+
+    /**
+     * Removes listeners.
+     *
+     * @param {String} selector
+     * @param {Function} [fn]
+     */
+    off(selector: string, fn: () => void): void;
+}
+
+declare module "Magento_Ui/js/lib/view/utils/dom-observer" {
+    export = DomObserver;
+}