From d0e952cf930182230c8ccf79deb5a641b331dfe9 Mon Sep 17 00:00:00 2001
From: Uladzislau Harbachou <uladzislau_harbachou@epam.com>
Date: Wed, 2 Dec 2015 17:28:46 +0300
Subject: [PATCH 1/4] JS-334: Layout "jumps" on refresh while gallery is
 loading

- Fixed naming of classes for gallery spinner
---
 lib/web/fotorama/fotorama.js                |  6 ++--
 lib/web/mage/gallery/gallery.html           |  2 +-
 lib/web/mage/gallery/gallery.less           | 34 ++++++++++-----------
 lib/web/mage/gallery/module/_variables.less |  3 +-
 4 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/lib/web/fotorama/fotorama.js b/lib/web/fotorama/fotorama.js
index df4044e41d1f2..e1bfb04138cfa 100644
--- a/lib/web/fotorama/fotorama.js
+++ b/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
@@ -1791,7 +1791,7 @@ fotoramaVersion = '4.6.4';
             $videoClose = $fotorama.find(cls(videoCloseClass)),
             videoClose = $videoClose[0],
 
-            $spinner = $fotorama.find('.fotorama_spin'),
+            $spinner = $fotorama.find(cls(fotoramaSpinnerClass)),
 
             $videoPlaying,
 
diff --git a/lib/web/mage/gallery/gallery.html b/lib/web/mage/gallery/gallery.html
index 15e9b88a8a657..eda2d4053c5a6 100644
--- a/lib/web/mage/gallery/gallery.html
+++ b/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">
diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less
index e21f147af0946..56782946d58ff 100644
--- a/lib/web/mage/gallery/gallery.less
+++ b/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;
@@ -1003,3 +986,20 @@
     }
 }
 
+// Styles for spinner in gallery.
+.fotorama__spinnner {
+    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;
+    }
+}
diff --git a/lib/web/mage/gallery/module/_variables.less b/lib/web/mage/gallery/module/_variables.less
index 1366f0a340b3f..24d460bb47590 100644
--- a/lib/web/mage/gallery/module/_variables.less
+++ b/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;
\ No newline at end of file
+@fotorama-inner-box-shadow: 3px;
+@fotorama-spinner-size: 64px;
\ No newline at end of file

From d833ca4ac25a263101acc4fa228a3878fe5e293a Mon Sep 17 00:00:00 2001
From: Uladzislau Harbachou <uladzislau_harbachou@epam.com>
Date: Fri, 4 Dec 2015 13:52:25 +0300
Subject: [PATCH 2/4] JS-334: Layout "jumps" on refresh while gallery is
 loading

- Fixed size exactly in preview of gallery
---
 .../view/frontend/templates/product/view/gallery.phtml   | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/app/code/Magento/Catalog/view/frontend/templates/product/view/gallery.phtml b/app/code/Magento/Catalog/view/frontend/templates/product/view/gallery.phtml
index d344cef700db1..9c66257dfe30d 100644
--- a/app/code/Magento/Catalog/view/frontend/templates/product/view/gallery.phtml
+++ b/app/code/Magento/Catalog/view/frontend/templates/product/view/gallery.phtml
@@ -20,6 +20,15 @@
         </div>
     </div>
 </div>
+<script type="text/javascript">
+    var config = {
+            "width": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_medium', 'width'); ?>,
+            "height": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_medium', 'height'); ?>
+        },
+        loader = document.querySelectorAll('[data-gallery-role="gallery-placeholder"] [data-role="loader"]')[0];
+
+    loader.style.paddingBottom = ( config.height / config.width * 100) + "%";
+</script>
 <script type="text/x-magento-init">
     {
         "[data-gallery-role=gallery-placeholder]": {

From c0b33b69d3613069beb05cdd0bd398104059c00d Mon Sep 17 00:00:00 2001
From: Uladzislau Harbachou <uladzislau_harbachou@epam.com>
Date: Mon, 7 Dec 2015 13:56:53 +0300
Subject: [PATCH 3/4] JS-334: Layout "jumps" on refresh while gallery is
 loading

- fix jumping content while gallery loading
---
 .../view/frontend/templates/product/view/gallery.phtml   | 9 +++++++++
 lib/web/mage/gallery/gallery.less                        | 2 +-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/code/Magento/Catalog/view/frontend/templates/product/view/gallery.phtml b/app/code/Magento/Catalog/view/frontend/templates/product/view/gallery.phtml
index 9c66257dfe30d..d04a7611b5713 100644
--- a/app/code/Magento/Catalog/view/frontend/templates/product/view/gallery.phtml
+++ b/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">
diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less
index 56782946d58ff..5f6a46b822f3e 100644
--- a/lib/web/mage/gallery/gallery.less
+++ b/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;

From ab40ea14620708a0cb0eaa95809f8d42d2905d28 Mon Sep 17 00:00:00 2001
From: Uladzislau Harbachou <uladzislau_harbachou@epam.com>
Date: Mon, 7 Dec 2015 15:09:47 +0300
Subject: [PATCH 4/4] JS-334: Layout "jumps" on refresh while gallery is
 loading

- fix for classname
---
 lib/web/mage/gallery/gallery.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less
index 5f6a46b822f3e..dc72bce2c8ee5 100644
--- a/lib/web/mage/gallery/gallery.less
+++ b/lib/web/mage/gallery/gallery.less
@@ -987,7 +987,7 @@
 }
 
 // Styles for spinner in gallery.
-.fotorama__spinnner {
+.fotorama__spinner {
     display: none;
     width: @fotorama-spinner-size;
     height: @fotorama-spinner-size;