@designcrowd/library.brand-page 5.17.21 → 5.17.22

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "5.17.21",
+  "version": "5.17.22",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

package/src/brand-page/components/image-gallery/ImageGalleryModal.mixin.ts

@@ -5,6 +5,15 @@ import ImageModalMixin from '../mixins/image-modal.mixin';
 import cloneDeep from 'lodash.clonedeep';
 import type { BrandPageContext, ImageItem } from '@brand-page/models';
 
+// Number of slides on each side of the current slide to keep mounted with a
+// real <img>. Slides outside this window render an empty placeholder so the
+// browser does not request full-resolution images for the entire gallery on
+// modal open — required to prevent mobile tab crashes on large galleries.
+// 3 (= 7 slides total) is wide enough that a user dragging slowly across
+// 2-3 slides never exposes a placeholder, while still capping decoded
+// image memory well under mobile per-tab limits.
+const IMAGE_RENDER_WINDOW = 3;
+
 export default defineComponent({
   mixins: [ComponentCommonMixin, ImageModalMixin],
   props: {
@@ -40,6 +49,7 @@ export default defineComponent({
       isImageModalLoading: false,
       carouselImages: [] as any[][] | undefined,
       showControl: true,
+      carouselComponentRef: 'image-gallery-carousel',
     };
   },
   computed: {
@@ -65,7 +75,7 @@ export default defineComponent({
 
     swiperOptions() {
       return {
-        initialSlide: 0,
+        initialSlide: this.selectedImageIndex ?? 0,
         loop: this.images.length > 1,
         slidesPerGroup: 1,
         slidesPerView: 1,
@@ -99,10 +109,6 @@ export default defineComponent({
       }
 
       this.isImageModalLoading = true;
-
-      this.swiperOptions.initialSlide = newIndex;
-
-      // this.$nextTick(() => this.checkImageModalImageComplete());
     },
 
     images: {
@@ -154,5 +160,108 @@ export default defineComponent({
     onImageModalClose() {
       this.$emit('close');
     },
+
+    isSlideInRenderWindow(index: number): boolean {
+      if (this.currentImageIndex === undefined) {
+        return false;
+      }
+
+      const total = this.images.length;
+
+      if (total === 0) {
+        return false;
+      }
+
+      const direct = Math.abs(index - this.currentImageIndex);
+      // For looped galleries, the shortest path between two slides may wrap
+      // around the end. Use whichever distance is smaller.
+      const wrapped = total - direct;
+      const distance = Math.min(direct, wrapped);
+
+      return distance <= IMAGE_RENDER_WINDOW;
+    },
+
+    onCarouselLoaded() {
+      // Reach through the Carousel ref to bind directly to the underlying
+      // Swiper instance — the shared Carousel doesn't emit slide-change
+      // events. Keeps `currentImageIndex` in sync with user navigation
+      // (arrows, swipes, keyboard) so the render window slides with the
+      // user.
+      //
+      // NOTE: `currentImageIndex` must not be bound back to Carousel's
+      // `:slide-index` prop. The shared Carousel watches that prop and
+      // calls `swiper.update()` + `swiper.slideTo()` on every change.
+      // With `slideChangeTransitionStart` updating currentImageIndex on
+      // every swipe, that creates a feedback loop where Swiper redoes a
+      // full layout recalculation on every user gesture — visible as
+      // jank and capable of crashing the tab on real mobile devices.
+      const carousel = this.$refs[this.carouselComponentRef] as any;
+      const swiper = carousel?.swiper;
+
+      if (!swiper || typeof swiper.on !== 'function') {
+        return;
+      }
+
+      // Listen at the *start* of the transition so the incoming neighbour
+      // mounts and starts loading while the slide animation is still
+      // playing. Listening on `slideChange` (end of transition) leaves a
+      // gap during fast swipes where the next neighbour is still a
+      // placeholder when it reaches the viewport — visible as a flicker.
+      const handleSlideChange = () => {
+        // `realIndex` reflects the underlying slide index when loop mode
+        // duplicates slides; `activeIndex` would include those duplicates.
+        const next =
+          typeof swiper.realIndex === 'number'
+            ? swiper.realIndex
+            : swiper.activeIndex;
+
+        if (typeof next === 'number' && next !== this.currentImageIndex) {
+          this.currentImageIndex = next;
+        }
+      };
+
+      swiper.on('slideChangeTransitionStart', handleSlideChange);
+      // Also handle instant jumps that bypass the transition (e.g. when
+      // navigation arrows trigger no-animation slides).
+      swiper.on('slideChange', handleSlideChange);
+    },
+
+    // Only the currently-viewed slide's load lifecycle should drive the
+    // modal's Loader. Neighbour FallbackImages mounted by the render window
+    // emit `image-loading` synchronously in their onMounted hook; without
+    // these gates that emission flips `isImageModalLoading` true mid-swipe,
+    // briefly flashing the spinner over the slide the user is actually on
+    // — the flicker reported on real mobile devices.
+    onSlideImageLoading(index: number) {
+      if (index === this.currentImageIndex) {
+        this.imageLoading();
+      }
+    },
+
+    onSlideImageLoaded(index: number) {
+      if (index === this.currentImageIndex) {
+        this.checkImageLoading(false);
+      }
+    },
+
+    onSlideImageError(index: number) {
+      if (index === this.currentImageIndex) {
+        this.checkImageLoading(true);
+      }
+    },
+
+    placeholderStyle(slide: any): Record<string, string> {
+      // Sized so the placeholder occupies the exact space the loaded image
+      // would, preventing slide-height jumps when the render window swaps
+      // between placeholder and real image. Mirrors the image's own
+      // `max-width: 100%` + `max-height: 90vh` + intrinsic aspect ratio.
+      if (!slide?.width || !slide?.height) {
+        return {};
+      }
+
+      return {
+        aspectRatio: `${slide.width} / ${slide.height}`,
+      };
+    },
   },
 });

package/src/brand-page/components/image-gallery/ImageGalleryModal.vue

@@ -6,13 +6,15 @@
     @modal-closed="onImageModalClose"
   >
     <Carousel
+      v-if="isImageModalVisible"
+      :ref="carouselComponentRef"
       :classes="['tw-h-full', 'tw-max-h-full', 'tw-justify-center']"
       :cards="carouselImages"
       :options="swiperOptions"
-      :slide-index="currentImageIndex"
       :show-bullets="false"
       :show-controls="showCarouselControls"
       :navigation-unique-indexer="navigationUniqueIndexer"
+      @on-carousel-load="onCarouselLoaded"
     >
       <template #arrow-left>
         <div id="button-prev" :class="navigationPrevClass">
@@ -30,7 +32,7 @@
           />
         </div>
       </template>
-      <template #slide="{ slide }">
+      <template #slide="{ slide, index }">
         <div
           class="tw-text-center tw-flex tw-flex-col tw-items-center tw-justify-center tw-overflow-auto tw-h-auto"
           :class="{ 'tw-justify-center': !slide.imageTitle }"
@@ -41,18 +43,27 @@
           >
             {{ slide.imageTitle }}
           </h3>
-          <Loader v-if="isImageModalLoading" class="tw-m-28" />
+          <Loader
+            v-if="isImageModalLoading && index === currentImageIndex"
+            class="tw-m-28"
+          />
           <FallbackImage
-            :key="`modal-slide-${currentImageIndex}`"
-            :ref="imageModalImageRef"
+            v-if="isSlideInRenderWindow(index)"
+            :key="`modal-slide-${index}`"
+            :ref="index === currentImageIndex ? imageModalImageRef : undefined"
             :image-url="slide.imageUrl"
             class="c-modal-image"
             :alt="slide.imageTitle || altText"
             :context="context"
             :content-index="contentIndex"
-            @image-loaded="checkImageLoading(false)"
-            @image-loading="imageLoading"
-            @image-error="checkImageLoading(true)"
+            @image-loaded="onSlideImageLoaded(index)"
+            @image-loading="onSlideImageLoading(index)"
+            @image-error="onSlideImageError(index)"
+          />
+          <div
+            v-else
+            class="c-modal-image-placeholder"
+            :style="placeholderStyle(slide)"
           />
         </div>
       </template>
@@ -115,4 +126,10 @@ export default {
   @apply tw-max-w-full;
   max-height: 90vh;
 }
+
+.c-modal-image-placeholder {
+  @apply tw-max-w-full;
+  width: 100%;
+  max-height: 90vh;
+}
 </style>