MC-4014: PageBuilder Performance Is Bad With Minimal Content

- Update stage init to allow for model creation whilst Page Builder is hidden

Author: davemacaulay

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/buttons/preview.js

@@ -6,8 +6,7 @@
 -->
 <div class="pagebuilder-stage"
      attr="id: id, 'data-role': 'pagebuilder-stage'"
-     css="'pagebuilder-show-borders': showBorders, 'pagebuilder-no-user-select': !userSelect(), 'panel-collapsed': parent.panel.isCollapsed, 'interacting': interacting, 'focus-child': focusChild"
-     data-bind="afterRender: onRender">
+     css="'pagebuilder-show-borders': showBorders, 'pagebuilder-no-user-select': !userSelect(), 'panel-collapsed': parent.panel.isCollapsed, 'interacting': interacting, 'focus-child': focusChild">
     <div class="pagebuilder-stage-loading" visible="loading" >
         <p translate="stageLoadingMessage"></p>
         <span class="spinner">

app/code/Magento/PageBuilder/view/adminhtml/web/js/drag-drop/sortable.js

@@ -10,14 +10,13 @@ import events from "Magento_PageBuilder/js/events";
 import _ from "underscore";
 import {SortableOptionsInterface} from "../../binding/sortable-options";
 import Config from "../../config";
-import ContentTypeInterface from "../../content-type";
+import ContentTypeInterface from "../../content-type.d";
+import ContentTypeCollectionInterface from "../../content-type-collection.d";
 import createContentType from "../../content-type-factory";
 import Option from "../../content-type-menu/option";
 import {OptionsInterface} from "../../content-type-menu/option.d";
-import StageUpdateAfterParamsInterface from "../../stage-update-after-params.d";
 import ContentTypeAfterRenderEventParamsInterface from "../content-type-after-render-event-params.d";
 import ContentTypeDroppedCreateEventParamsInterface from "../content-type-dropped-create-event-params";
-import ContentTypeRedrawAfterEventParamsInterface from "../content-type-redraw-after-event-params";
 import PreviewCollection from "../preview-collection";
 
 /**
@@ -51,23 +50,23 @@ export default class Preview extends PreviewCollection {
             }
         });
 
-        events.on("buttons:renderAfter", (eventData: ContentTypeAfterRenderEventParamsInterface) => {
-            if (eventData.contentType.id === this.parent.id) {
+        events.on("buttons:renderAfter", (args: ContentTypeAfterRenderEventParamsInterface) => {
+            if (args.contentType.id === this.parent.id) {
                 this.debouncedResizeHandler();
             }
         });
 
-        events.on("button-item:renderAfter", (eventData: ContentTypeAfterRenderEventParamsInterface) => {
-            if (eventData.contentType.parent.id === this.parent.id) {
+        events.on("button-item:renderAfter", (args: ContentTypeAfterRenderEventParamsInterface) => {
+            if (args.contentType.parent.id === this.parent.id) {
                 this.debouncedResizeHandler();
             }
         });
 
-        events.on("stage:updateAfter", (eventData: StageUpdateAfterParamsInterface) => {
+        events.on("stage:updateAfter", () => {
             this.debouncedResizeHandler();
         });
 
-        events.on("contentType:redrawAfter", (eventData: ContentTypeRedrawAfterEventParamsInterface) => {
+        events.on("contentType:redrawAfter", () => {
             this.debouncedResizeHandler();
         });
     }

app/code/Magento/PageBuilder/view/adminhtml/web/js/master-format/render.js

@@ -23,11 +23,11 @@ import {OptionsInterface} from "../content-type-menu/option.d";
 import TitleOption from "../content-type-menu/title-option";
 import ContentTypeInterface from "../content-type.d";
 import {DataObject} from "../data-store";
+import {getDraggedContentTypeConfig} from "../drag-drop/registry";
 import {getSortableOptions} from "../drag-drop/sortable";
 import appearanceConfig from "./appearance-config";
 import ObservableObject from "./observable-object.d";
 import ObservableUpdater from "./observable-updater";
-import {getDraggedContentTypeConfig} from "../drag-drop/registry";
 
 /**
  * @api

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

@@ -120,9 +120,10 @@ function onSortStart(preview: Preview, event: Event, ui: JQueryUI.SortableUIPara
                 ui.item.prev(".pagebuilder-drop-indicator").css("display", "none").addClass("hidden-drop-indicator");
             }
 
-            sortedContentType = contentTypeInstance;
             showDropIndicators(contentTypeInstance.config.name);
 
+            sortedContentType = contentTypeInstance;
+
             // Dynamically change the connect with option to restrict content types
             $(this).sortable("option", "connectWith", getAllowedContainersClasses(contentTypeInstance.config.name));
             $(this).sortable("refresh");

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/preview.html

@@ -21,7 +21,7 @@ export default class MasterFormatRenderer {
      */
     public applyBindings(tree: KnockoutObservableArray<ContentTypeInterface>): Promise<string> {
         const element = $("<div>");
-        return new Promise((resolve, reject) => {
+        return new Promise((resolve) => {
             engine.waitForFinishRender().then(() => {
                 ko.cleanNode(element[0]);
                 const filtered: JQuery = filterHtml(element);

app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/buttons/preview.ts

@@ -22,6 +22,7 @@ import PageBuilderInterface from "./page-builder.d";
 import buildStage from "./stage-builder";
 import deferred from "./utils/promise-deferred";
 import DeferredInterface from "./utils/promise-deferred.d";
+import StageUpdateAfterParamsInterface from "./stage-update-after-params";
 
 export default class Stage {
     public parent: PageBuilderInterface;
@@ -64,12 +65,8 @@ export default class Stage {
         this.parent = parent;
         this.id = parent.id;
         generateAllowedParents();
-    }
 
-    /**
-     * On render build the stage and init any event listeners
-     */
-    public onRender() {
+        // Wait for the stage to be built alongside the stage being rendered
         Promise.all([
             buildStage(this, this.parent.initialValue),
             this.afterRenderDeferred.promise,
@@ -181,7 +178,7 @@ export default class Stage {
 
         // Watch for stage update events & manipulations to the store, debounce for 50ms as multiple stage changes
         // can occur concurrently.
-        events.on("stage:updateAfter", (args) => {
+        events.on("stage:updateAfter", (args: StageUpdateAfterParamsInterface) => {
             if (args.stageId === this.id) {
                 this.applyBindingsDebounce();
             }