Prevent product image from blinking when gallery loads

Author: Mateusz Krzeszowiak

lib/web/mage/gallery/gallery.js

@@ -270,7 +270,10 @@ define([
                     next: $t('Next'),
                     previous: $t('Previous')
                 }),
-                mainImageIndex;
+                mainImageIndex,
+                $element = settings.$element,
+                $placeholderImage = $element.find('.gallery-placeholder__image'),
+                $fotoramaElement;
 
             if (settings.breakpoints) {
                 _.each(_.values(settings.breakpoints), function (breakpoint) {
@@ -285,23 +288,40 @@ 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');
+
+            // Adjust wrapper and placeholder styling just before initializing the gallery.
+            $placeholderImage.css({
+                position: 'absolute',
+                left: '50%',
+                transform: 'translateX(-50%)'
+            });
+            $element
+                .css('min-height', settings.$element.height())
+                .append(tpl);
+
+            $fotoramaElement = $element.find('[data-gallery-role="gallery"]');
+            $fotoramaElement.fotorama(config);
+            $fotoramaElement.find('.fotorama__stage__frame.fotorama__active')
+                    .one('f:load', function() {
+                        // Remove placeholder when main gallery image loads.
+                        $placeholderImage.remove();
+                        $element
+                            .removeClass('_block-content-loading')
+                            .css('min-height', '');
+                    });
+            settings.fotoramaApi = $fotoramaElement.data('fotorama');
+
             $.extend(true, config, this.startConfig);
 
             mainImageIndex = getMainImageIndex(config.data);
-
             if (mainImageIndex) {
                 this.settings.fotoramaApi.show({
                     index: mainImageIndex,