Merge pull request #59 from ulaharbmg/JS-334

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

Author: uharbachou

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

@@ -20,6 +20,24 @@
         </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">
     {
         "[data-gallery-role=gallery-placeholder]": {

lib/web/fotorama/fotorama.js

@@ -89,8 +89,8 @@ fotoramaVersion = '4.6.4';
 
         horizontalImageClass = _fotoramaClass + '_horizontal_ratio',
         verticalImageClass = _fotoramaClass + '_vertical_ratio',
-
-        spinnerShowClass = _fotoramaClass + '_spinner';
+        fotoramaSpinnerClass = _fotoramaClass + '__spinner',
+        spinnerShowClass = fotoramaSpinnerClass + '--show';
     var JQUERY_VERSION = $ && $.fn.jquery.split('.');
 
     if (!JQUERY_VERSION
@@ -1781,7 +1781,7 @@ fotoramaVersion = '4.6.4';
             $videoClose = $fotorama.find(cls(videoCloseClass)),
             videoClose = $videoClose[0],
 
-            $spinner = $fotorama.find('.fotorama_spin'),
+            $spinner = $fotorama.find(cls(fotoramaSpinnerClass)),
 
             $videoPlaying,
 

lib/web/mage/gallery/gallery.html

@@ -20,7 +20,7 @@
             <div class="fotorama__video-close"></div>
             <div class="fotorama__zoom-in" data-gallery-role="fotorama__zoom-in" aria-label="Zoom in" role="button" tabindex="0"></div>
             <div class="fotorama__zoom-out" data-gallery-role="fotorama__zoom-out" aria-label="Zoom out" role="button" tabindex="0"></div>
-            <div class="fotorama_spin"></div>
+            <div class="fotorama__spinner"></div>
         </div>
         <div class="fotorama__nav-wrap" data-gallery-role="nav-wrap">
             <div class="fotorama__nav fotorama__nav--thumbs">

lib/web/mage/gallery/gallery.less

@@ -13,23 +13,6 @@
 @import 'module/_focus.less';
 @import 'module/_fullscreen.less';
 
-.fotorama_spin {
-    display: none;
-    &.fotorama_spinner {
-        display: block;
-        width: 64px;
-        height: 64px;
-        background-image: url('@{baseDir}../images/loader-1.gif');
-        bottom: 0;
-        left: 0;
-        margin: auto;
-        position: absolute;
-        right: 0;
-        top: 0;
-        z-index: @z-index-1;
-    }
-}
-
 .fotorama__zoom-in,
 .fotorama__zoom-out {
     display: none;
@@ -983,7 +966,7 @@
 .gallery-placeholder {
     .loading-mask {
         padding: 0 0 50%;
-        position: absolute;
+        position: static;
     }
     .loader img {
       position: absolute;
@@ -1003,3 +986,20 @@
     }
 }
 
+// Styles for spinner in gallery.
+.fotorama__spinner {
+    display: none;
+    width: @fotorama-spinner-size;
+    height: @fotorama-spinner-size;
+    background-image: url('@{baseDir}../images/loader-1.gif');
+    bottom: 0;
+    left: 0;
+    margin: auto;
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: @z-index-1;
+    &.fotorama__spinner--show {
+        display: block;
+    }
+}

lib/web/mage/gallery/module/_variables.less

@@ -9,4 +9,5 @@
 @size-fotorama-block: 80px;
 @fotorama-thumb-arrow: 30px;
 @fotorama-fullscreen-zoom-time: 0.3s;
-@fotorama-inner-box-shadow: 3px;
+@fotorama-inner-box-shadow: 3px;
+@fotorama-spinner-size: 64px;