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

- Add better transitions for full screen mode from “Edit with Page Builder” button

Author: davemacaulay

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_page-builder.less

@@ -96,6 +96,35 @@
     }
 }
 
+.pagebuilder-wysiwyg-wrapper.pagebuilder-transition-out .pagebuilder-stage-wrapper {
+    .pagebuilder-stage-wrapper.stage-full-screen;
+
+    .pagebuilder-header {
+        .pagebuilder-stage-wrapper.stage-full-screen.pagebuilder-header;
+
+        .action-close {
+            .pagebuilder-stage-wrapper.stage-full-screen.pagebuilder-header.action-close;
+        }
+    }
+}
+
+.pagebuilder-wysiwyg-wrapper.pagebuilder-transition-in {
+    .pagebuilder-stage-wrapper {
+        -moz-transition: .175s ease-in-out;
+        -webkit-transition: .175s ease-in-out;
+        opacity: 0;
+        transform: scale(.8);
+        transition: .175s ease-in-out;
+        visibility: hidden;
+    }
+
+    &.trigger-transition .pagebuilder-stage-wrapper {
+        opacity: 1;
+        transform: scale(1);
+        visibility: visible;
+    }
+}
+
 .pagebuilder-add-row-wrapper {
     float: left;
     text-align: center;
@@ -154,22 +183,22 @@
     }
 
     .pagebuilder-stage-loading {
-        padding: 90px 0 30px;
-        text-align: center;
-
-        p {
-            font-size: 14px;
-            margin: 3rem 0;
+        .spinner {
+            font-size: 4rem;
+            left: 50%;
+            margin-left: -2rem;
+            margin-top: -2rem;
+            position: absolute;
+            top: 50%;
         }
     }
 
     .pagebuilder-canvas {
-        -moz-transition: 1s ease-in-out;
-        -webkit-transition: 1s ease-in-out;
-
+        -moz-transition: opacity .75s ease-in-out, visibility .75s ease-in-out;
+        -webkit-transition: opacity .75s ease-in-out, visibility .75s ease-in-out;
         opacity: 0;
         padding-bottom: 60px;
-        transition: 1s ease-in-out;
+        transition: opacity .75s ease-in-out, visibility .75s ease-in-out;
         visibility: hidden;
 
         &.active {

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_panel.less

@@ -47,13 +47,18 @@
 }
 
 .pagebuilder-panel-wrapper {
-    display: none;
+    -moz-transition: opacity .75s ease-in-out, visibility .75s ease-in-out;
+    -webkit-transition: opacity .75s ease-in-out, visibility .75s ease-in-out;
     float: left;
+    opacity: 0;
     position: relative;
+    transition: opacity .75s ease-in-out, visibility .75s ease-in-out;
+    visibility: hidden;
     width: 150px;
 
     &.visible {
-        display: block;
+        opacity: 1;
+        visibility: visible;
 
         &.sticky-top {
             position: fixed;

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

@@ -5,19 +5,24 @@
 
 define([
     'jquery',
+    'Magento_Ui/js/lib/view/utils/async',
+    'underscore',
     '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, domObserver, PageBuilder) {
+    'Magento_PageBuilder/js/page-builder',
+    'Magento_PageBuilder/js/utils/promise-deferred'
+], function (jQuery, $, _, Wysiwyg, $t, events, domObserver, PageBuilder, deferred) {
     'use strict';
 
     /**
      * Extend the original WYSIWYG with added PageBuilder functionality
      */
     return Wysiwyg.extend({
         defaults: {
+            transition: false,
+            transitionOut: false,
             elementSelector: '> textarea',
             stageSelector: '.pagebuilder-stage-wrapper',
             pageBuilder: false,
@@ -47,7 +52,8 @@ define([
          */
         initObservable: function () {
             this._super()
-                .observe('isComponentInitialized visiblePageBuilder wysiwygConfigData loading');
+                .observe('isComponentInitialized visiblePageBuilder wysiwygConfigData loading transition ' +
+                    'transitionOut');
 
             return this;
         },
@@ -56,7 +62,9 @@ define([
          * Handle button click, init the Page Builder application
          */
         pageBuilderEditButtonClick: function (context, event) {
-            var modalInnerWrap = $(event.currentTarget).parents('.modal-inner-wrap');
+            var modalInnerWrap = jQuery(event.currentTarget).parents('.modal-inner-wrap');
+
+            this.transition(false);
 
             // Determine if the Page Builder instance is within a modal
             this.isWithinModal = modalInnerWrap.length === 1;
@@ -66,7 +74,7 @@ define([
             }
 
             if (!this.isComponentInitialized()) {
-                this.disableDomObserver($(event.currentTarget).parent()[0]);
+                this.disableDomObserver(jQuery(event.currentTarget).parent()[0]);
             }
 
             this.initPageBuilder();
@@ -78,15 +86,16 @@ define([
          */
         initPageBuilder: function () {
             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);
+
+                // Disable the domObserver for the entire stage
+                $.async({
+                    component: this,
+                    selector: this.stageSelector
+                }, this.disableDomObserver.bind(this));
             }
 
             if (!this.wysiwygConfigData()['pagebuilder_button']) {
@@ -114,26 +123,43 @@ define([
          * Init various listeners on the stage
          */
         initPageBuilderListeners: function () {
-            var id = this.pageBuilder.id;
+            var id = this.pageBuilder.id,
+                renderDeferred = jQuery.Deferred(),
+                fullScreenDeferred = jQuery.Deferred(),
+                rendered = false;
 
             events.on('stage:' + id + ':readyAfter', function () {
                 this.loading(false);
             }.bind(this));
 
+            events.on('stage:' + id + ':renderAfter', function () {
+                renderDeferred.resolve();
+                rendered = true;
+            });
+
             events.on('stage:' + id + ':masterFormatRenderAfter', function (args) {
                 this.value(args.value);
             }.bind(this));
 
             events.on('stage:' + id + ':fullScreenModeChangeAfter', function (args) {
                 if (!args.fullScreen && this.wysiwygConfigData()['pagebuilder_button']) {
-                    this.visiblePageBuilder(false);
-
                     if (this.isWithinModal && this.modal) {
                         this.modal.css({
                             transform: '',
                             transition: ''
                         });
                     }
+
+                    // Force full screen mode whilst the animation occurs
+                    this.transitionOut(true);
+                    // Trigger animation out
+                    this.transition(false);
+
+                    // Reset the transition out class and hide the stage
+                    _.delay(function () {
+                        this.transitionOut(false);
+                        this.visiblePageBuilder(false);
+                    }.bind(this), 185);
                 } else if (args.fullScreen && this.wysiwygConfigData()['pagebuilder_button']) {
                     this.visiblePageBuilder(true);
 
@@ -143,8 +169,24 @@ define([
                             transition: 'none'
                         });
                     }
+
+                    fullScreenDeferred.resolve();
+
+                    // If the stage has already rendered once we don't need to wait until animating the stage in
+                    if (rendered) {
+                        _.defer(function () {
+                            this.transition(true);
+                        }.bind(this));
+                    }
                 }
             }.bind(this));
+
+            // Wait until the stage is rendered and full screen mode is activated
+            jQuery.when(renderDeferred, fullScreenDeferred).done(function () {
+                _.defer(function () {
+                    this.transition(true);
+                }.bind(this));
+            }.bind(this));
         }
     });
 });

app/code/Magento/PageBuilder/view/adminhtml/web/js/page-builder.js

@@ -7,11 +7,10 @@
 <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">
-    <div class="pagebuilder-stage-loading" visible="loading" >
-        <p translate="stageLoadingMessage"></p>
+    <div class="pagebuilder-stage-loading" visible="loading">
         <span class="spinner">
-                <span repeat="8" attr="'data-repeat-index': $index"/>
-            </span>
+            <span repeat="8" attr="'data-repeat-index': $index"/>
+        </span>
     </div>
     <div class="pagebuilder-canvas content-type-drop content-type-container stage-container"
          css="active: !loading()"

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

@@ -14,7 +14,9 @@
         <span translate="pageBuilderEditButtonText" />
     </button>
     <if args="isComponentInitialized">
-        <div visible="visiblePageBuilder" class="pagebuilder-wysiwyg-wrapper">
+        <div visible="visiblePageBuilder"
+             class="pagebuilder-wysiwyg-wrapper"
+             css="{'pagebuilder-transition-in': wysiwygConfigData()['pagebuilder_button'], 'trigger-transition': transition, 'pagebuilder-transition-out': transitionOut}">
             <with args="pageBuilder">
                 <render />
             </with>

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

@@ -3,10 +3,10 @@
  * See COPYING.txt for license details.
  */
 
+import $ from "jquery";
 import ko from "knockout";
 import events from "Magento_PageBuilder/js/events";
 import utils from "mageUtils";
-import _ from "underscore";
 import Config from "./config";
 import PageBuilderInterface from "./page-builder.d";
 import Panel from "./panel";
@@ -53,14 +53,9 @@ export default class PageBuilder implements PageBuilderInterface {
      */
     public onFullScreenChange(): void {
         if (this.isFullScreen()) {
-            this.originalScrollTop = window.scrollY;
-            _.defer(() => {
-                window.scroll(0, 0);
-            });
+            $("body").css("overflow", "hidden");
         } else {
-            _.defer(() => {
-                window.scroll(0, this.originalScrollTop);
-            });
+            $("body").css("overflow", "");
         }
 
         events.trigger(`stage:${ this.id }:fullScreenModeChangeAfter`, {

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

@@ -39,7 +39,6 @@ export default class Stage {
     public interacting: KnockoutObservable<boolean> = ko.observable(false);
     public userSelect: KnockoutObservable<boolean> = ko.observable(true);
     public focusChild: KnockoutObservable<boolean> = ko.observable(false);
-    public stageLoadingMessage: string = $t("Please hold! we're just retrieving your content...");
     public dataStore: DataStore = new DataStore();
     public afterRenderDeferred: DeferredInterface = deferred();
     private template: string = "Magento_PageBuilder/content-type/preview";
@@ -66,6 +65,11 @@ export default class Stage {
         this.id = parent.id;
         generateAllowedParents();
 
+        // Fire an event after the DOM has rendered
+        this.afterRenderDeferred.promise.then(() => {
+            events.trigger(`stage:${ this.id }:renderAfter`, {stage: this});
+        });
+
         // Wait for the stage to be built alongside the stage being rendered
         Promise.all([
             buildStage(this, this.parent.initialValue),