MC-4014: PageBuilder Performance Is Bad With Minimal Content

- Fix test SlideItemDeleteSlideItem

Author: davemacaulay

app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/ContentTypeSliderActionGroup.xml

@@ -14,6 +14,7 @@
         </arguments>
         <comment userInput="Adding Slide" stepKey="comment"/>
         <executeJS function="return document.getElementsByClassName('pagebuilder-slide').length+1" stepKey="initialNumberOfSlidesPlusOne"/>
+        <scrollTo selector="{{PageBuilderPanel.searchPanel}}" x="0" y="-150" stepKey="scrollToSearchPanel"/>
         <click selector="{{PageBuilderPanel.searchPanel}}" stepKey="unFocusSlide"/>
         <moveMouseOver selector="{{PageBuilderStage.contentTypeInStageByIndex(PageBuilderSliderContentType.role, slideGroupIndex)}}" stepKey="mouseOverSlider"/>
         <waitForPageLoad stepKey="waitForPageLoad1"/>

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

@@ -29,6 +29,7 @@ import ContentTypeRemovedEventParamsInterface from "../content-type-removed-even
 import ObservableUpdater from "../observable-updater";
 import PreviewCollection from "../preview-collection";
 import Slide from "../slide/preview";
+import delayUntil from "../../utils/delay-until";
 
 /**
  * @api
@@ -190,9 +191,11 @@ export default class Preview extends PreviewCollection {
      * @param {boolean} force
      */
     public navigateToSlide(slideIndex: number, dontAnimate: boolean = false, force: boolean = false): void {
-        $(this.element).slick("slickGoTo", slideIndex, dontAnimate);
-        this.setActiveSlide(slideIndex);
-        this.setFocusedSlide(slideIndex, force);
+        if ($(this.element).hasClass("slick-initialized")) {
+            $(this.element).slick("slickGoTo", slideIndex, dontAnimate);
+            this.setActiveSlide(slideIndex);
+            this.setFocusedSlide(slideIndex, force);
+        }
     }
 
     /**
@@ -252,7 +255,12 @@ export default class Preview extends PreviewCollection {
             events.on("slide:mountAfter", (args: ContentTypeMountEventParamsInterface) => {
                 if (args.id === slide.id) {
                     _.defer(() => {
-                        this.navigateToSlide(this.parent.children().length - 1);
+                        // Wait until slick is initialized before trying to navigate
+                        delayUntil(
+                            () => this.navigateToSlide(this.parent.children().length - 1),
+                            () => $(this.element).hasClass("slick-initialized"),
+                            10,
+                        );
                         slide.preview.onOptionEdit();
                     });
                     events.off(`slide:${slide.id}:mountAfter`);