From eccff7bfae8eebfc99d8c7e92c47f8aca99cb2e7 Mon Sep 17 00:00:00 2001
From: Ola <ola.frankowska@snow.dog>
Date: Wed, 21 Jul 2021 12:25:20 +0200
Subject: [PATCH 1/4] #80752 fix gallery placeholder not showing on load

---
 .../components/Organisms/gallery/_gallery.scss               | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/Snowdog_Components/components/Organisms/gallery/_gallery.scss b/Snowdog_Components/components/Organisms/gallery/_gallery.scss
index cc4486eee..4b7abe334 100644
--- a/Snowdog_Components/components/Organisms/gallery/_gallery.scss
+++ b/Snowdog_Components/components/Organisms/gallery/_gallery.scss
@@ -122,6 +122,11 @@
             max-height: none;
         }
 
+        &:is(picture).ratio-image {
+            width: 100%;
+            height: 100%;
+        }
+
         &.ratio-image {
             @include mq($screen-l) {
                 top: 50%;

From 26e0f14753958214543bffcf39a35b1c57aee32c Mon Sep 17 00:00:00 2001
From: Ola <ola.frankowska@snow.dog>
Date: Wed, 21 Jul 2021 12:25:57 +0200
Subject: [PATCH 2/4] #80752 eliminate PDP image jumping on load

---
 Magento_Catalog/styles/modules/_fotorama.scss       | 13 +++++++++++++
 .../Organisms/gallery/_gallery-variables.scss       |  2 +-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/Magento_Catalog/styles/modules/_fotorama.scss b/Magento_Catalog/styles/modules/_fotorama.scss
index 1dfaa8005..6f5a8735b 100644
--- a/Magento_Catalog/styles/modules/_fotorama.scss
+++ b/Magento_Catalog/styles/modules/_fotorama.scss
@@ -195,9 +195,22 @@
         }
 
         &._block-content-loading {
+            // fotorama__nav--dots height
+            margin-bottom: 30px;
+
+            @include mq($screen-m) {
+                margin-bottom: 0;
+            }
+
             .fotorama__nav--dots,
             .fotorama__nav--thumbs {
+                position: absolute;
+                bottom: 0;
                 opacity: 0;
+
+                @include mq($screen-l) {
+                    position: relative;
+                }
             }
 
             .loader {
diff --git a/Snowdog_Components/components/Organisms/gallery/_gallery-variables.scss b/Snowdog_Components/components/Organisms/gallery/_gallery-variables.scss
index 967d0524a..337b97c1f 100644
--- a/Snowdog_Components/components/Organisms/gallery/_gallery-variables.scss
+++ b/Snowdog_Components/components/Organisms/gallery/_gallery-variables.scss
@@ -31,5 +31,5 @@ $gallery__thumb-border-active--dots         : 0 !default;
 $gallery__placeholder-width                 : auto !default;
 $gallery__placeholder-padding-bottom        : $spacer--medium !default;
 $gallery__placeholder-padding-bottom\@medium: 0 !default;
-$gallery__placeholder-transform\@large      : translate(calc(-50% + #{$spacer--medium}), -50%) !default;
+$gallery__placeholder-transform\@large      : translate(calc(-50% + #{$spacer}), -50%) !default;
 $gallery__placeholder-padding-right\@large  : calc(#{$gallery__thumb-width\@medium + 2px}) !default;

From d4d9ba95a996b7c88ed4960bec1553ad87d7c60a Mon Sep 17 00:00:00 2001
From: Ola <ola.frankowska@snow.dog>
Date: Wed, 21 Jul 2021 12:31:16 +0200
Subject: [PATCH 3/4] #80752 update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c49e9f295..c75c068f8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@ All notable changes to this project will be documented in this file.
 - add to cart sticky shouldn't have focusable elements when it has `aria-hidden="true"` (#80420)
 - some a11y issues in checkout (#80424)
 - gallery navigation not showing on load (#80752)
+- gallery placeholder not showing on load and jumping image on load (#80752)
 ### Changed
 - instead of using atomic classes for some page heading styles added in a lot of places, created a new class for easier customization (#80498)
 ### Updated

From f9c0b011e1fb6f9ff59f14870016245957373623 Mon Sep 17 00:00:00 2001
From: Ola <ola.frankowska@snow.dog>
Date: Thu, 22 Jul 2021 11:12:33 +0200
Subject: [PATCH 4/4] #80752 use variable

---
 Magento_Catalog/styles/modules/_fotorama.scss | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/Magento_Catalog/styles/modules/_fotorama.scss b/Magento_Catalog/styles/modules/_fotorama.scss
index 6f5a8735b..981fa9423 100644
--- a/Magento_Catalog/styles/modules/_fotorama.scss
+++ b/Magento_Catalog/styles/modules/_fotorama.scss
@@ -1,3 +1,5 @@
+$_block-content-loading-margin-bottom: 30px !default;
+
 .fotorama {
     width: 100%;
 
@@ -195,8 +197,7 @@
         }
 
         &._block-content-loading {
-            // fotorama__nav--dots height
-            margin-bottom: 30px;
+            margin-bottom: $_block-content-loading-margin-bottom;
 
             @include mq($screen-m) {
                 margin-bottom: 0;