JS-334: Layout "jumps" on refresh while gallery is loading

- fix jumping content while gallery loading

Author: uharbachou

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

@@ -20,13 +20,22 @@
         </div>
     </div>
 </div>
+<!--Fix for jumping content. Loader must be the same size as gallery.-->
 <script type="text/javascript">
     var config = {
             "width": <?php /* @escapeNotVerified */ echo $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": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/navtype"); ?>",
             "height": <?php /* @escapeNotVerified */ echo $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">

lib/web/mage/gallery/gallery.less

@@ -966,7 +966,7 @@
 .gallery-placeholder {
     .loading-mask {
         padding: 0 0 50%;
-        position: absolute;
+        position: static;
     }
     .loader img {
       position: absolute;