Feature/gallery placeholder hiding

CHANGELOG.md

@@ -24,7 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Improve tsconfig for better IDE paths support - @patzick, @filrak (#2474)
 - fix breadcrumbs changing too early - @filrak (#2469)
 - add cart count config, allows you to display the item count instead of a sum of the item quantities - @pauluse (#2483)
-- improved product gallery load view, shows correct image on reload - @patzick (#2481, #2482, #2488)
+- improved product gallery load view, shows correct image on reload - @patzick (#2481, #2482, #2488, #2501)
 - Fix an issue where the index.html template within a theme is ignored - @EnthrallRecords (#2489) 
 
 ### Deprecated / Removed

src/themes/default/components/core/ProductGallery.vue

@@ -1,26 +1,26 @@
 <template>
-  <div class="media-gallery">
+  <div class="media-gallery" :class="{'media-gallery--loaded': carouselLoaded}">
     <div v-show="OfflineOnly">
       <img class="offline-image" v-lazy="offline" :src="offline.src" ref="offline" alt="">
     </div>
-    <div v-show="OnlineOnly">
-      <div class="relative">
-        <product-gallery-overlay
-          v-if="isZoomOpen"
-          :current-slide="currentSlide"
-          :product-name="product.name"
+    <div v-show="OnlineOnly" class="relative">
+      <product-gallery-overlay
+        v-if="isZoomOpen"
+        :current-slide="currentSlide"
+        :product-name="product.name"
+        :gallery="gallery"
+        @close="toggleZoom"
+      />
+      <no-ssr>
+        <product-gallery-carousel
+          v-if="showProductGalleryCarousel"
           :gallery="gallery"
-          @close="toggleZoom"
+          :configuration="configuration"
+          :product-name="product.name"
+          @toggle="openOverlay"
+          @loaded="carouselLoaded = true"
         />
-        <no-ssr>
-          <product-gallery-carousel
-            v-if="showProductGalleryCarousel"
-            :gallery="gallery"
-            :configuration="configuration"
-            :product-name="product.name"
-            @toggle="openOverlay"/>
-        </no-ssr>
-      </div>
+      </no-ssr>
     </div>
   </div>
 </template>
@@ -51,7 +51,8 @@ export default {
     return {
       isZoomOpen: false,
       showProductGalleryCarousel: false,
-      currentSlide: 0
+      currentSlide: 0,
+      carouselLoaded: false
     }
   },
   mounted () {
@@ -80,11 +81,21 @@ export default {
 <style lang="scss" scoped>
 .media-gallery {
   text-align: center;
+  width: 100%;
   height: 100%;
+  min-height: calc(90vw * 1.1);
   background-image: url('/assets/placeholder.svg');
   background-repeat: no-repeat;
   background-position: center;
   background-size: 40% auto;
+
+  @media only screen and (min-width:768px) {
+    min-height: inherit;
+  }
+
+  &--loaded {
+    background-image: none;
+  }
 }
 .offline-image {
   width: 100%;

src/themes/default/components/core/ProductGalleryCarousel.vue

@@ -90,6 +90,7 @@ export default {
         pagination.$on('paginationclick', this.increaseCarouselTransitionSpeed)
       }
     }
+    this.$emit('loaded')
   },
   beforeDestroy () {
     this.$bus.$off('filter-changed-product', this.selectVariant)