Merge remote-tracking branch 'origin/AC-10845' into spartans_pr_05082024

Author: glo60612

app/code/Magento/Ui/view/base/web/js/grid/masonry.js

@@ -100,7 +100,6 @@ define([
             }
             this.imageMargin = parseInt(this.imageMargin, 10);
             this.container = $('[data-id="' + this.containerId + '"]')[0];
-
             this.setLayoutStyles();
             this.setEventListener();
 
@@ -129,38 +128,47 @@ define([
         /**
          * Set layout styles inside the container
          */
-        setLayoutStyles: function () {
-            var containerWidth = parseInt(this.container.clientWidth, 10),
+        setLayoutStyles: function (callback) {
+            var containerWidth, rowImages, ratio, rowHeight, calcHeight, isLastRow, rowNumber;
+
+            if (typeof this.container != 'undefined') {
+                containerWidth = parseInt(this.container.clientWidth, 10),
                 rowImages = [],
                 ratio = 0,
                 rowHeight = 0,
                 calcHeight = 0,
                 isLastRow = false,
                 rowNumber = 1;
 
-            this.setMinRatio();
+                this.setMinRatio();
 
-            this.rows().forEach(function (image, index) {
-                ratio += parseFloat((image.width / image.height).toFixed(2));
-                rowImages.push(image);
+                this.rows().forEach(function (image, index) {
+                    ratio += parseFloat((image.width / image.height).toFixed(2));
+                    rowImages.push(image);
 
-                if (ratio < this.minRatio && index + 1 !== this.rows().length) {
-                    // Row has more space for images and the image is not the last one - proceed to the next iteration
-                    return;
-                }
+                    if (ratio < this.minRatio && index + 1 !== this.rows().length) {
+                        /**
+                         * Row has more space for images and the image is not the last one -
+                         * Proceed to the next iteration
+                         */
+                        return;
+                    }
 
-                ratio = Math.max(ratio, this.minRatio);
-                calcHeight = (containerWidth - this.imageMargin * rowImages.length) / ratio;
-                rowHeight = calcHeight < this.maxImageHeight ? calcHeight : this.maxImageHeight;
-                isLastRow = index + 1 === this.rows().length;
+                    ratio = Math.max(ratio, this.minRatio);
+                    calcHeight = (containerWidth - this.imageMargin * rowImages.length) / ratio;
+                    rowHeight = calcHeight < this.maxImageHeight ? calcHeight : this.maxImageHeight;
+                    isLastRow = index + 1 === this.rows().length;
 
-                this.assignImagesToRow(rowImages, rowNumber, rowHeight, isLastRow);
+                    this.assignImagesToRow(rowImages, rowNumber, rowHeight, isLastRow);
 
-                rowImages = [];
-                ratio = 0;
-                rowNumber++;
+                    rowImages = [];
+                    ratio = 0;
+                    rowNumber++;
 
-            }.bind(this));
+                }.bind(this));
+            } else {
+                setTimeout(callback, 0);
+            }
         },
 
         /**