Merge remote-tracking branch 'gallery/feature/fotorama-speedup' into MC-15440

Author: vzabaznov

app/code/Magento/Catalog/Block/Product/View/Gallery.php

@@ -239,4 +239,23 @@ private function getGalleryImagesConfig()
 
         return $this->getData('gallery_images_config');
     }
+
+    /**
+     * Get main product image
+     *
+     * @param string $size
+     * @return string
+     */
+    public function getMainProductImage($size = 'medium_image_url')
+    {
+        foreach ($this->getGalleryImages() as $image) {
+            $image = $image->getData($size);
+
+            if (!$image) {
+                return $this->_imageHelper->getDefaultPlaceholderUrl('image');
+            }
+
+            return $image;
+        }
+    }
 }

app/code/Magento/Catalog/view/frontend/templates/product/view/gallery.phtml

@@ -12,32 +12,14 @@
  * @var $block \Magento\Catalog\Block\Product\View\Gallery
  */
 ?>
+
 <div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder">
-    <div data-role="loader" class="loading-mask">
-        <div class="loader">
-            <img src="<?= /* @escapeNotVerified */ $block->getViewFileUrl('images/loader-1.gif') ?>"
-                 alt="<?= /* @escapeNotVerified */ __('Loading...') ?>">
-        </div>
-    </div>
+    <img
+        class="gallery-placeholder__image"
+        src="<?= /* @escapeNotVerified */ $block->getMainProductImage() ?>"
+    />
 </div>
-<!--Fix for jumping content. Loader must be the same size as gallery.-->
-<script>
-    var config = {
-            "width": <?= /* @escapeNotVerified */ $block->getImageAttribute('product_page_image_medium', 'width') ?>,
-            "thumbheight": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_small', 'height')
-                        ?: $block->getImageAttribute('product_page_image_small', 'width'); ?>,
-            "navtype": "<?= /* @escapeNotVerified */ $block->getVar("gallery/navtype") ?>",
-            "height": <?= /* @escapeNotVerified */ $block->getImageAttribute('product_page_image_medium', 'height') ?>
-        },
-        thumbBarHeight = 0,
-        loader = document.querySelectorAll('[data-gallery-role="gallery-placeholder"] [data-role="loader"]')[0];
 
-    if (config.navtype === 'horizontal') {
-        thumbBarHeight = config.thumbheight;
-    }
-
-    loader.style.paddingBottom = ( config.height / config.width * 100) + "%";
-</script>
 <script type="text/x-magento-init">
     {
         "[data-gallery-role=gallery-placeholder]": {

lib/web/mage/gallery/gallery.less

@@ -977,12 +977,9 @@
 
 // While first time init
 .gallery-placeholder {
-    .loading-mask {
-        padding: 0 0 50%;
-        position: static;
-    }
-    .loader img {
-        position: absolute;
+    &__image {
+        display: block;
+        margin: auto;
     }
 }
 
@@ -1003,6 +1000,7 @@
         display: block;
     }
 }
+
 .fotorama__product-video--loaded {
     .fotorama__img, .fotorama__img--full {
         display: none !important;