MC-5403: Edit With Page Builder Button Is Slow Opening Page Builder And No Loading Indicator After 1st Load

- Resolve bad performance with edit button when opening from category or product

Author: davemacaulay

app/code/Magento/PageBuilder/view/adminhtml/web/js/form/element/wysiwyg.js

@@ -8,8 +8,9 @@ define([
     'Magento_Ui/js/form/element/wysiwyg',
     'mage/translate',
     'Magento_PageBuilder/js/events',
+    'Magento_Ui/js/lib/view/utils/dom-observer',
     'Magento_PageBuilder/js/page-builder'
-], function ($, Wysiwyg, $t, events, PageBuilder) {
+], function ($, Wysiwyg, $t, events, domObserver, PageBuilder) {
     'use strict';
 
     /**
@@ -18,13 +19,14 @@ define([
     return Wysiwyg.extend({
         defaults: {
             elementSelector: '> textarea',
-            pageBuilder: {},
+            stageSelector: '.pagebuilder-stage-wrapper',
+            pageBuilder: false,
             visiblePageBuilder: false,
             isComponentInitialized: false,
             wysiwygConfigData: {},
             pageBuilderEditButtonText: $t('Edit with Page Builder'),
             isWithinModal: false,
-            modal: false,
+            modal: false
         },
 
         /**
@@ -45,7 +47,7 @@ define([
          */
         initObservable: function () {
             this._super()
-                .observe('visiblePageBuilder wysiwygConfigData loading');
+                .observe('isComponentInitialized visiblePageBuilder wysiwygConfigData loading');
 
             return this;
         },
@@ -54,14 +56,19 @@ define([
          * Handle button click, init the Page Builder application
          */
         pageBuilderEditButtonClick: function (context, event) {
-            var modalInnerWrap = $(event.currentTarget).parents(".modal-inner-wrap");
+            var modalInnerWrap = $(event.currentTarget).parents('.modal-inner-wrap');
 
             // Determine if the Page Builder instance is within a modal
             this.isWithinModal = modalInnerWrap.length === 1;
+
             if (this.isWithinModal) {
                 this.modal = modalInnerWrap;
             }
 
+            if (!this.isComponentInitialized()) {
+                this.disableDomObserver($(event.currentTarget).parent()[0]);
+            }
+
             this.initPageBuilder();
             this.toggleFullScreen();
         },
@@ -70,17 +77,32 @@ define([
          * Init Page Builder
          */
         initPageBuilder: function () {
-            if (!this.isComponentInitialized) {
+            if (!this.isComponentInitialized()) {
+                $.async({
+                    component: this,
+                    selector: this.stageSelector
+                }, this.disableDomObserver.bind(this));
+
                 this.loading(true);
                 this.pageBuilder = new PageBuilder(this.wysiwygConfigData(), this.initialValue);
                 this.initPageBuilderListeners();
+                this.isComponentInitialized(true);
             }
 
             if (!this.wysiwygConfigData()['pagebuilder_button']) {
                 this.visiblePageBuilder(true);
             }
         },
 
+        /**
+         * Disable the domObserver on the PageBuilder stage to improve performance
+         *
+         * @param {HTMLElement} node
+         */
+        disableDomObserver: function (node) {
+            domObserver.disableNode(node);
+        },
+
         /**
          * Toggle Page Builder full screen mode
          */
@@ -95,7 +117,6 @@ define([
             var id = this.pageBuilder.id;
 
             events.on('stage:' + id + ':readyAfter', function () {
-                this.isComponentInitialized = true;
                 this.loading(false);
             }.bind(this));
 
@@ -109,17 +130,17 @@ define([
 
                     if (this.isWithinModal && this.modal) {
                         this.modal.css({
-                            transform: "",
-                            transition: ""
+                            transform: '',
+                            transition: ''
                         });
                     }
                 } else if (args.fullScreen && this.wysiwygConfigData()['pagebuilder_button']) {
                     this.visiblePageBuilder(true);
 
                     if (this.isWithinModal && this.modal) {
                         this.modal.css({
-                            transform: "none",
-                            transition: "none"
+                            transform: 'none',
+                            transition: 'none'
                         });
                     }
                 }

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

@@ -13,9 +13,11 @@
             click="pageBuilderEditButtonClick.bind($data)">
         <span translate="pageBuilderEditButtonText" />
     </button>
-    <if args="visiblePageBuilder">
-        <with args="pageBuilder">
-            <render />
-        </with>
+    <if args="isComponentInitialized">
+        <div visible="visiblePageBuilder" class="pagebuilder-wysiwyg-wrapper">
+            <with args="pageBuilder">
+                <render />
+            </with>
+        </div>
     </if>
 </div>

app/code/Magento/PageBuilder/view/adminhtml/web/template/form/element/wysiwyg.html

@@ -7,7 +7,6 @@ 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";
-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";
@@ -86,10 +85,7 @@ export default class Stage {
     /**
      * The stage has been initiated fully and is ready
      */
-    public ready([buildResults, canvasElement]: [any[], HTMLElement]) {
-        // Disable the dom observer from running on our canvas
-        domObserver.disableNode(canvasElement);
-
+    public ready() {
         events.trigger(`stage:${ this.id }:readyAfter`, {stage: this});
         this.loading(false);
         this.initListeners();