MC-4014: PageBuilder Performance Is Bad With Minimal Content

- Resolve issue with duplicating image uploader plugins

Author: davemacaulay

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

@@ -32,10 +32,6 @@ export default class Preview extends BasePreview {
      * The textarea element in disabled mode
      */
     private textarea: HTMLTextAreaElement;
-    /**
-     * Uploader instance
-     */
-    private uploader: Uploader;
 
     private buttonPlaceholder: string = $t("Edit Button Text");
 
@@ -45,7 +41,17 @@ export default class Preview extends BasePreview {
      * @returns {Uploader}
      */
     public getUploader() {
-        return this.uploader;
+        const dataStore = this.parent.dataStore.get() as DataObject;
+        const initialImageValue = dataStore[this.config.additional_data.uploaderConfig.dataScope] || "";
+
+        // Create uploader
+        return new Uploader(
+            "imageuploader_" + this.parent.id,
+            this.config.additional_data.uploaderConfig,
+            this.parent.id,
+            this.parent.dataStore,
+            (initialImageValue as object[]),
+        );
     }
 
     /**
@@ -216,20 +222,6 @@ export default class Preview extends BasePreview {
             const imageObject = dataStore[this.config.additional_data.uploaderConfig.dataScope][0] || {};
             events.trigger(`image:${this.parent.id}:assignAfter`, imageObject);
         });
-
-        events.on(`${this.config.name}:mountAfter`, () => {
-            const dataStore = this.parent.dataStore.get() as DataObject;
-            const initialImageValue = dataStore[this.config.additional_data.uploaderConfig.dataScope] || "";
-
-            // Create uploader
-            this.uploader = new Uploader(
-                "imageuploader_" + this.parent.id,
-                this.config.additional_data.uploaderConfig,
-                this.parent.id,
-                this.parent.dataStore,
-                (initialImageValue as object[]),
-            );
-        });
     }
 
     /**

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

@@ -14,18 +14,23 @@ import Uploader from "../uploader";
  * @api
  */
 export default class Preview extends BasePreview {
-    /**
-     * Uploader instance
-     */
-    private uploader: Uploader;
 
     /**
      * Get registry callback reference to uploader UI component
      *
      * @returns {Uploader}
      */
     public getUploader() {
-        return this.uploader;
+        const dataStore = this.parent.dataStore.get() as DataObject;
+        const initialImageValue = dataStore[this.config.additional_data.uploaderConfig.dataScope] || "";
+
+        return new Uploader(
+            "imageuploader_" + this.parent.id,
+            this.config.additional_data.uploaderConfig,
+            this.parent.id,
+            this.parent.dataStore,
+            (initialImageValue as object[]),
+        );
     }
 
     /**
@@ -40,19 +45,5 @@ export default class Preview extends BasePreview {
             const imageObject: object = files ? (files[0] as object) : {};
             events.trigger(`image:${this.parent.id}:assignAfter`, imageObject);
         });
-
-        events.on(`${this.config.name}:mountAfter`, () => {
-            const dataStore = this.parent.dataStore.get() as DataObject;
-            const initialImageValue = dataStore[this.config.additional_data.uploaderConfig.dataScope] || "";
-
-            // Create uploader
-            this.uploader = new Uploader(
-                "imageuploader_" + this.parent.id,
-                this.config.additional_data.uploaderConfig,
-                this.parent.id,
-                this.parent.dataStore,
-                (initialImageValue as object[]),
-            );
-        });
     }
 }