MC-4217: Performance of show/hide Slider on stage is very slow

- Don’t rebuild Slick when any data changes, only rebuild when selected options are changed

Author: davemacaulay

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

@@ -48,6 +48,24 @@ export default class Preview extends PreviewCollection {
     private afterChildrenRenderDeferred: DeferredInterface = deferred();
     private buildSlickDebounce = _.debounce(this.buildSlick.bind(this), 10);
 
+    /**
+     * Define keys which when changed should not trigger the slider to be rebuilt
+     *
+     * @type {string[]}
+     */
+    private ignoredKeysForBuild: string[] = [
+        "display",
+        "margins_and_padding",
+        "border",
+        "border_color",
+        "border_radius",
+        "border_width",
+        "css_classes",
+        "name",
+        "text_align",
+    ];
+    private previousData: DataObject;
+
     /**
      * @param {ContentTypeCollectionInterface} parent
      * @param {ContentTypeConfigInterface} config
@@ -73,7 +91,13 @@ export default class Preview extends PreviewCollection {
                     this.element = element as HTMLElement;
 
                     this.childSubscribe = this.parent.children.subscribe(this.buildSlickDebounce);
-                    this.parent.dataStore.subscribe(this.buildSlickDebounce);
+                    this.previousData = this.parent.dataStore.get() as DataObject;
+                    this.parent.dataStore.subscribe((data: DataObject) => {
+                        if (this.hasDataChanged(this.previousData, data)) {
+                            this.buildSlickDebounce();
+                        }
+                        this.previousData = data;
+                    });
 
                     this.buildSlick();
 
@@ -346,6 +370,19 @@ export default class Preview extends PreviewCollection {
         });
     }
 
+    /**
+     * Determine if the data has changed, whilst ignoring certain keys which don't require a rebuild
+     *
+     * @param {DataObject} previousData
+     * @param {DataObject} newData
+     * @returns {boolean}
+     */
+    private hasDataChanged(previousData: DataObject, newData: DataObject) {
+        previousData = _.omit(previousData, this.ignoredKeysForBuild);
+        newData = _.omit(newData, this.ignoredKeysForBuild);
+        return !_.isEqual(previousData, newData);
+    }
+
     /**
      * Build our instance of slick
      */