MC-15981: Page Builder Render

Author: davemacaulay

app/code/Magento/PageBuilder/composer.json

@@ -16,6 +16,7 @@
         "magento/module-rule": "*",
         "magento/module-directory": "*",
         "magento/module-email": "*",
+        "magento/module-requirejs": "*",
         "php": "~7.1.3||~7.2.0"
     },
     "conflict": {

app/code/Magento/PageBuilder/view/adminhtml/web/js/form/form-mixin.js

@@ -3,7 +3,12 @@
  * See COPYING.txt for license details.
  */
 
-define(['jquery', 'Magento_PageBuilder/js/events', 'consoleLogger'], function ($, events, consoleLogger) {
+define([
+    'underscore',
+    'jquery',
+    'Magento_PageBuilder/js/events',
+    'consoleLogger'
+], function (_, $, events, consoleLogger) {
     'use strict';
 
     var mixin = {
@@ -35,32 +40,29 @@ define(['jquery', 'Magento_PageBuilder/js/events', 'consoleLogger'], function ($
          * @param {Object} data
          */
         save: function (redirect, data) {
-            var self = this,
-                submit = this._super.bind(self, redirect, data),
-                locks,
+            var submit = this._super.bind(this, redirect, data),
                 timeout;
 
-            if (this.pageBuilderInstances.length === 0) {
+            if (_.isEmpty(this.pageBuilderInstances)) {
                 submit();
             } else {
-                locks = this.pageBuilderInstances.map(function (instance) {
-                    return instance.stage.renderingLock;
-                });
+                timeout = setTimeout(function () {
+                    consoleLogger.error('Page Builder was rendering for 5 seconds without releasing locks.');
+                }, 5000);
 
-                if (locks.length === 0) {
-                    submit();
-                } else {
-                    timeout = setTimeout(function () {
-                        consoleLogger.error('Page Builder was rendering for 5 seconds without releasing locks.');
-                    }, 5000);
+                $('body').trigger('processStart');
 
-                    $('body').trigger('processStart');
-                    $.when.apply(null, locks).then(function () {
-                        $('body').trigger('processStop');
-                        clearTimeout(timeout);
-                        submit();
-                    });
-                }
+                // Wait for all rendering locks within Page Builder stages to resolve
+                $.when.apply(
+                    null,
+                    this.pageBuilderInstances.map(function (instance) {
+                        return instance.stage.renderingLock;
+                    })
+                ).then(function () {
+                    $('body').trigger('processStop');
+                    clearTimeout(timeout);
+                    submit();
+                });
             }
         }
     };

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

@@ -36,7 +36,7 @@ export default class Stage {
      * We always complete a single render when the stage is first loaded, so we can set the lock when the stage is
      * created. The lock is used to halt the parent forms submission when Page Builder is rendering.
      */
-    public renderingLock: JQueryDeferred<boolean> = $.Deferred();
+    public renderingLock: JQueryDeferred<void>;
     private template: string = "Magento_PageBuilder/content-type/preview";
     private render: Render;
     private collection: Collection = new Collection();