PB-390: Nested Page Builder content can fail to save when action is performed quickly

- Add numerous rendering locks to ensure we always observe the last lock when waiting in the form mixin

Author: davemacaulay

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

@@ -41,7 +41,8 @@ define([
          */
         save: function (redirect, data) {
             var submit = this._super.bind(this, redirect, data),
-                timeout;
+                timeout,
+                locks;
 
             if (_.isEmpty(this.pageBuilderInstances)) {
                 submit();
@@ -56,7 +57,9 @@ define([
                 $.when.apply(
                     null,
                     this.pageBuilderInstances.map(function (instance) {
-                        return instance.stage.renderingLock;
+                        locks = instance.stage.renderingLocks;
+
+                        return locks[locks.length - 1];
                     })
                 ).then(function () {
                     $('body').trigger('processStop');

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<void>;
+    public renderingLocks: Array<JQueryDeferred<void>> = [];
     private template: string = "Magento_PageBuilder/content-type/preview";
     private render: Render;
     private collection: Collection = new Collection();
@@ -47,12 +47,13 @@ export default class Stage {
      * @type {(() => void) & _.Cancelable}
      */
     private applyBindingsDebounce = _.debounce(() => {
-        this.renderingLock = $.Deferred();
         this.render.applyBindings(this.rootContainer)
             .then((renderedOutput: string) => events.trigger(`stage:${ this.id }:masterFormatRenderAfter`, {
                 value: renderedOutput,
             })).then(() => {
-                this.renderingLock.resolve();
+                this.renderingLocks.forEach((lock) => {
+                    lock.resolve();
+                });
             }).catch((error: Error) => {
                 if (error) {
                     console.error(error);
@@ -129,6 +130,8 @@ export default class Stage {
         // can occur concurrently.
         events.on("stage:updateAfter", (args: StageUpdateAfterParamsInterface) => {
             if (args.stageId === this.id) {
+                // Create the rendering lock straight away
+                this.createLock();
                 this.applyBindingsDebounce();
             }
         });
@@ -154,6 +157,13 @@ export default class Stage {
         events.on("stage:childFocusStop", () => this.focusChild(false));
     }
 
+    /**
+     * Create a new lock for rendering
+     */
+    private createLock(): void {
+        this.renderingLocks.push($.Deferred());
+    }
+
     /**
      * On content type removed
      *