ENGCOM-7456: Prevent product gallery elements from blinking when they load #27871

Author: slavvka

lib/web/mage/gallery/gallery.js

@@ -270,7 +270,10 @@ define([
                     next: $t('Next'),
                     previous: $t('Previous')
                 }),
-                mainImageIndex;
+                mainImageIndex,
+                $element = settings.$element,
+                $fotoramaElement,
+                $fotoramaStage;
 
             if (settings.breakpoints) {
                 _.each(_.values(settings.breakpoints), function (breakpoint) {
@@ -285,19 +288,38 @@ define([
                 settings.breakpoints = breakpoints;
             }
 
-            _.extend(config, config.options);
-            config.options = undefined;
-
-            config.click = false;
-            config.breakpoints = null;
+            _.extend(config, config.options,
+                {
+                    options: undefined,
+                    click: false,
+                    breakpoints: null
+                }
+            );
             settings.currentConfig = config;
-            settings.$element.css('min-height', settings.$element.height());
-            settings.$element.html(tpl);
-            settings.$element.removeClass('_block-content-loading');
-            settings.$elementF = $(settings.$element.children()[0]);
-            settings.$elementF.fotorama(config);
-            settings.$element.css('min-height', '');
-            settings.fotoramaApi = settings.$elementF.data('fotorama');
+
+            $element
+                .css('min-height', settings.$element.height())
+                .append(tpl);
+
+            $fotoramaElement = $element.find('[data-gallery-role="gallery"]');
+
+            $fotoramaStage = $fotoramaElement.find('.fotorama__stage');
+            $fotoramaStage.css('position', 'absolute');
+
+            $fotoramaElement.fotorama(config);
+            $fotoramaElement.find('.fotorama__stage__frame.fotorama__active')
+                    .one('f:load', function () {
+                        // Remove placeholder when main gallery image loads.
+                        $element.find('.gallery-placeholder__image').remove();
+                        $element
+                            .removeClass('_block-content-loading')
+                            .css('min-height', '');
+
+                        $fotoramaStage.css('position', '');
+                    });
+            settings.$elementF = $fotoramaElement;
+            settings.fotoramaApi = $fotoramaElement.data('fotorama');
+
             $.extend(true, config, this.startConfig);
 
             mainImageIndex = getMainImageIndex(config.data);

lib/web/mage/gallery/gallery.less

@@ -395,6 +395,11 @@
     position: absolute;
     top: 0;
     width: @fotorama-arw-size;
+
+    ._block-content-loading & {
+        opacity: 0;
+    }
+
     .fotorama__arr__arr {
         &:extend(.fotorama-sprite);
         .fotorama-abs-center();