Loader replaced with actual product photo to visualy speedup loading

Author: Igloczek

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

@@ -12,32 +12,16 @@
  * @var $block \Magento\Catalog\Block\Product\View\Gallery
  */
 ?>
+
+<?php $images = $block->getGalleryImages()->toArray()['items'] ?>
+
 <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="<?= $images[0]['medium_image_url'] ?>"
+    />
 </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

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