hr-design-system-handlebars 1.114.83 → 1.114.84

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# v1.114.84 (Wed Feb 05 2025)
+
+#### 🐛 Bug Fix
+
+- add spinning wheel loading and Fix issue two galleries [#1233](https://github.com/mumprod/hr-design-system-handlebars/pull/1233) (saad.elbaciri@hr.de [@selbaciri](https://github.com/selbaciri))
+
+#### Authors: 2
+
+- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
+- selbaciri (saad.elbaciri@hr.de)
+
+---
+
 # v1.114.83 (Wed Feb 05 2025)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -3828,7 +3828,7 @@ article #commentList {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1738755389665;
+  counter-reset: cnt1738773896776;
 }
 .animate-delay-100 {
   --tw-animate-delay: 100ms;
@@ -3845,6 +3845,11 @@ article #commentList {
   animation-duration: 500ms;
   animation-duration: var(--tw-animate-duration);
 }
+.animate-infinite {
+  --tw-animate-iteration: infinite;
+  animation-iteration-count: infinite;
+  animation-iteration-count: var(--tw-animate-iteration);
+}
 .animate-once {
   --tw-animate-iteration: 1;
   animation-iteration-count: 1;
@@ -4268,7 +4273,7 @@ html { scroll-behavior: smooth; }
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1738755389665 1;
+  counter-increment: cnt1738773896776 1;
 }
 .-ordered::before {
   position: absolute;
@@ -4286,7 +4291,7 @@ html { scroll-behavior: smooth; }
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, 1);
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1738755389665);
+  content: counter(cnt1738773896776);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -7543,6 +7548,10 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
     display: none;
   }
 
+  .md\:h-11 {
+    height: 2.75rem;
+  }
+
   .md\:h-12 {
     height: 3rem;
   }
@@ -7583,6 +7592,10 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
     width: 25%;
   }
 
+  .md\:w-11 {
+    width: 2.75rem;
+  }
+
   .md\:w-12 {
     width: 3rem;
   }

package/dist/assets/js/components/content/copytext/components/gallery/js/gallerySlider.alpine.js

@@ -1,4 +1,4 @@
-export default function gallerySlider() {
+export default function gallerySlider(gallerySelector) {
     return { 
         slides: [],
         captions: [],
@@ -8,23 +8,30 @@ export default function gallerySlider() {
         touchStartX: null,
         touchEndX: null,
         swipeThreshold: 50,
+        loadedImages: [],
+        loading: true,
         previous() {
             this.animationEnabled = true;
             this.slideToRight = false;    
-            this.currentSlideIndex = (this.currentSlideIndex - 1 > 0) ? this.currentSlideIndex - 1 : this.slides.length;            
+            this.currentSlideIndex = (this.currentSlideIndex - 1 > 0) ? this.currentSlideIndex - 1 : this.slides.length;
+            this.updateLoadingState(this.currentSlideIndex - 1);          
         },            
-        next() {                
+        next() {  
             if (this.slides.length > 0) {
                 this.animationEnabled = true;
                 this.slideToRight = true;
                 this.currentSlideIndex = (this.currentSlideIndex % this.slides.length) + 1;
             }
+            this.updateLoadingState(this.currentSlideIndex - 1);  
         },
         loadSlider() {
-            this.slides = [...document.querySelectorAll('.gallery-slider__image')];
-            this.slides.forEach((slide, index) => slide.setAttribute('x-show', `currentSlideIndex === ${index + 1}`));
-            this.captions = [...document.querySelectorAll('.gallery-slider__caption')];
-            this.captions.forEach((caption, index) => caption.setAttribute('x-show', `currentSlideIndex === ${index + 1}`));
+            const galleryContainer = document.querySelector(`.${gallerySelector}`);
+            if (galleryContainer) {
+                this.slides = [...galleryContainer.querySelectorAll('.js-gallery-slider-image')];
+                this.slides.forEach((slide, index) => slide.setAttribute('x-show', `currentSlideIndex === ${index + 1}`));
+                this.captions = [...galleryContainer.querySelectorAll('.js-gallery-slider-caption')];
+                this.captions.forEach((caption, index) => caption.setAttribute('x-show', `currentSlideIndex === ${index + 1}`));
+            }
         },
         handleTouchStart(event) {
             this.touchStartX = event.touches[0].clientX
@@ -43,7 +50,19 @@ export default function gallerySlider() {
                 this.touchStartX = null
                 this.touchEndX = null
             }
+        },
+        handleImageLoad(event) {
+           const img = event.target; 
+            if (img.complete) {
+                this.loading = false;
+                this.loadedImages.push(img);
+            }          
+        },
+        updateLoadingState(currentSlideIndex) {
+            const currentSlide = this.slides[currentSlideIndex];
+            if (currentSlide) {
+                this.loading = !this.loadedImages.includes(currentSlide.querySelector('.js-gallery-image'));
+            }
         }
-
     };
 }

package/dist/views/components/base/image/responsive_image.hbs

@@ -20,7 +20,7 @@
                            {{#with this.srcset}} srcset="{{this}}"{{/with}}>
                 {{/each}}
             {{/with}}
-                <img {{#if ../_isWebview}}data-primary-type="hr-nt:image" data-image-id="{{nextRandom}}"{{/if}} class="w-full{{~#if ../_addClassImg}} {{../_addClassImg}}{{/if}}" loading="{{#if ../_noDelay}}auto{{else}}lazy{{/if}}"{{#if ../_noDelay}} fetchpriority="high"{{/if}} src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="{{#if ../_alttext}}{{../_alttext}}{{else}}{{../this.alttext}}{{/if}}" {{~#if ../_title}} title="{{../_title}}"{{~/if}} {{~#if ../_errorHandler }} onerror="this.onerror=null; {{../_errorHandler}}"{{/if}}>
+                <img {{#if ../_isWebview}}data-primary-type="hr-nt:image" data-image-id="{{nextRandom}}"{{/if}} class="w-full{{~#if ../_addClassImg}} {{../_addClassImg}}{{/if}}" loading="{{#if ../_noDelay}}auto{{else}}lazy{{/if}}"{{#if ../_noDelay}} fetchpriority="high"{{/if}} src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="{{#if ../_alttext}}{{../_alttext}}{{else}}{{../this.alttext}}{{/if}}" {{~#if ../_title}} title="{{../_title}}"{{~/if}} {{~#if ../_errorHandler }} onerror="this.onerror=null; {{../_errorHandler}}"{{/if}} {{~#if ../../_loadHandler}} x-on:load="{{../../_loadHandler}}" {{~/if}}>
         </picture>
         {{#unless _disableNoScript}}
             <noscript>
@@ -49,7 +49,8 @@
                 alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}"
                 class="w-full{{~#with ../../_addClassImg }} {{this}}{{/with}}"
                 {{~#if ../../_title}} title="{{../../_title}}"{{~/if}}
-                {{~#if ../../_errorHandler}} onerror="this.onerror=null; {{../../_errorHandler}}" {{~/if}}>
+                {{~#if ../../_errorHandler}} onerror="this.onerror=null; {{../../_errorHandler}}" {{~/if}}
+                {{~#if ../../_loadHandler}} x-on:load="{{../../_loadHandler}}" {{~/if}}>
             {{~#with ../../_addClass }}</div>{{/with}}
         {{/with}}
     {{/if}}

package/dist/views/components/content/copytext/components/gallery/galleryitem_copytext.hbs

@@ -1,12 +1,13 @@
+{{~changeRandom~}}
 {{~#with this.gallery ~}}
-<div class="relative w-full overflow-hidden" x-on:touchstart="handleTouchStart($event)" x-on:touchmove="handleTouchMove($event)" x-on:touchend="handleTouchEnd()"
-    x-data="gallerySlider()"
+<div class="relative w-full overflow-hidden js-gallery{{getRandom}}" x-on:touchstart="handleTouchStart($event)" x-on:touchmove="handleTouchMove($event)" x-on:touchend="handleTouchEnd()"
+    x-data="gallerySlider('js-gallery{{getRandom}}')"
     x-init="loadSlider()"
     ax-load
     x-ignore
      >
     <div class="relative w-full select-none">
-        <div class="absolute top-0 bottom-0 left-0 right-0 ar-16-9">
+        <div class="absolute top-0 bottom-0 left-0 right-0 z-30 ar-16-9">
             {{#> components/button/button _variant="transparent" _alpineClick="previous()" _css="absolute z-10 flex items-center justify-center left-4 bottom-4 sm:left-5 sm:bottom-5" _onBackground=true}}
                     {{> components/button/components/button_icon _icon="arrow-left" _iconmap="icons" _css="w-8 h-8 sm:w-11 sm:h-11 py-1 sm:py-2 fill-link dark:fill-link-dark" }}
             {{/components/button/button}}
@@ -14,8 +15,11 @@
                 {{> components/button/components/button_icon _icon="arrow-right" _iconmap="icons" _css="w-8 h-8 sm:w-11 sm:h-11 py-1 sm:py-2 fill-link dark:fill-link-dark" }}
             {{/components/button/button}}
         </div>
+        <div class="absolute inset-0 z-20 flex items-center justify-center ar-16-9" aria-hidden="true" x-show="loading">
+            {{> components/base/image/icon _icon="loading" _addClass="animate-spin animate-infinite h-8 w-8 md:w-11 md:h-11 fill-link dark:fill-link-dark" }}
+        </div>
         {{#each this.items}}
-         {{~> components/content/copytext/components/gallery/galleryitem_figure _mediaBacklinkToStoryTeaser=../../../this.toModel.mediaBacklinkToStoryTeaser-adjust_context _cssClassCaption=../../_cssClassCaption ~}}
+            {{~> components/content/copytext/components/gallery/galleryitem_figure _mediaBacklinkToStoryTeaser=../../../this.toModel.mediaBacklinkToStoryTeaser-adjust_context _cssClassCaption=../../_cssClassCaption ~}}
         {{/each}}
     </div>
 </div>

package/dist/views/components/content/copytext/components/gallery/galleryitem_description_copytext.hbs

@@ -1,4 +1,4 @@
-<figcaption class="gallery-slider__caption">
+<figcaption class="js-gallery-slider-caption">
     {{~#> components/content/copytext/components/image/caption _isFullTextVisible=true  _cssClassCaption=_cssClassCaption~}}
         <span class="block font-bold">{{loca "gallery_image_number"}} {{this.number}}/{{this.totalNumber}} {{~#with this.title}} <span class="mx-1.5">|</span>{{this}}{{/with~}}</span>
         {{#if this.caption}} {{~> components/content/copytext/components/image/image_caption_text~}} {{/if}}

package/dist/views/components/content/copytext/components/gallery/galleryitem_figure.hbs

@@ -1,5 +1,5 @@
 <figure {{#unless @first}} x-cloak {{/unless}}>
-    <div class="relative ar-16-9 gallery-slider__image animate-duration-500 animate-delay-100 animate-once animate-ease-in-out" 
+    <div class="relative ar-16-9 js-gallery-slider-image animate-duration-500 animate-delay-100 animate-once animate-ease-in-out" 
         :class="animationEnabled ? (slideToRight ? 'animate-fade-left' : 'animate-fade-right') : ''">
         {{~#if this.displayOriginal.isTrue ~}}
             <div class="relative" aria-hidden="true">
@@ -16,16 +16,19 @@
                 _type="gallery"
                 _variant="portrait"
                 _addClass="absolute top-0 left-0 right-0 bottom-0"
-                _addClassImg="!w-auto h-full absolute left-1/2 -translate-x-1/2"
+                _addClassImg="!w-auto h-full absolute left-1/2 -translate-x-1/2 js-gallery-image"
                 _noDelay=(if @first true '')
-                _isWebview=true}}
+                _isWebview=true
+                _loadHandler="handleImageLoad($event)"}}
         {{else}}
             {{> components/base/image/responsive_image  
                 _type="gallery" 
                 _variant="default" 
                 _addClass="ar-16-9"
+                _addClassImg="js-gallery-image"
                 _noDelay=(if @first true '')
-                _isWebview=true}}
+                _isWebview=true
+                _loadHandler="handleImageLoad($event)"}}
         {{~/if~}}
     </div>
     {{~> components/content/copytext/components/gallery/galleryitem_description_copytext _mediaBacklinkToStoryTeaser=_mediaBacklinkToStoryTeaser _cssClassCaption=_cssClassCaption~}}

package/dist/views_static/components/base/image/responsive_image.hbs

@@ -20,7 +20,7 @@
                            {{#with this.srcset}} srcset="{{this}}"{{/with}}>
                 {{/each}}
             {{/with}}
-                <img {{#if ../_isWebview}}data-primary-type="hr-nt:image" data-image-id="{{nextRandom}}"{{/if}} class="w-full{{~#if ../_addClassImg}} {{../_addClassImg}}{{/if}}" loading="{{#if ../_noDelay}}auto{{else}}lazy{{/if}}"{{#if ../_noDelay}} fetchpriority="high"{{/if}} src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="{{#if ../_alttext}}{{../_alttext}}{{else}}{{../this.alttext}}{{/if}}" {{~#if ../_title}} title="{{../_title}}"{{~/if}} {{~#if ../_errorHandler }} onerror="this.onerror=null; {{../_errorHandler}}"{{/if}}>
+                <img {{#if ../_isWebview}}data-primary-type="hr-nt:image" data-image-id="{{nextRandom}}"{{/if}} class="w-full{{~#if ../_addClassImg}} {{../_addClassImg}}{{/if}}" loading="{{#if ../_noDelay}}auto{{else}}lazy{{/if}}"{{#if ../_noDelay}} fetchpriority="high"{{/if}} src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="{{#if ../_alttext}}{{../_alttext}}{{else}}{{../this.alttext}}{{/if}}" {{~#if ../_title}} title="{{../_title}}"{{~/if}} {{~#if ../_errorHandler }} onerror="this.onerror=null; {{../_errorHandler}}"{{/if}} {{~#if ../../_loadHandler}} x-on:load="{{../../_loadHandler}}" {{~/if}}>
         </picture>
         {{#unless _disableNoScript}}
             <noscript>
@@ -49,7 +49,8 @@
                 alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}"
                 class="w-full{{~#with ../../_addClassImg }} {{this}}{{/with}}"
                 {{~#if ../../_title}} title="{{../../_title}}"{{~/if}}
-                {{~#if ../../_errorHandler}} onerror="this.onerror=null; {{../../_errorHandler}}" {{~/if}}>
+                {{~#if ../../_errorHandler}} onerror="this.onerror=null; {{../../_errorHandler}}" {{~/if}}
+                {{~#if ../../_loadHandler}} x-on:load="{{../../_loadHandler}}" {{~/if}}>
             {{~#with ../../_addClass }}</div>{{/with}}
         {{/with}}
     {{/if}}

package/dist/views_static/components/content/copytext/components/gallery/galleryitem_copytext.hbs

@@ -1,12 +1,13 @@
+{{~changeRandom~}}
 {{~#with this.gallery ~}}
-<div class="relative w-full overflow-hidden" x-on:touchstart="handleTouchStart($event)" x-on:touchmove="handleTouchMove($event)" x-on:touchend="handleTouchEnd()"
-    x-data="gallerySlider()"
+<div class="relative w-full overflow-hidden js-gallery{{getRandom}}" x-on:touchstart="handleTouchStart($event)" x-on:touchmove="handleTouchMove($event)" x-on:touchend="handleTouchEnd()"
+    x-data="gallerySlider('js-gallery{{getRandom}}')"
     x-init="loadSlider()"
     ax-load
     x-ignore
      >
     <div class="relative w-full select-none">
-        <div class="absolute top-0 bottom-0 left-0 right-0 ar-16-9">
+        <div class="absolute top-0 bottom-0 left-0 right-0 z-30 ar-16-9">
             {{#> components/button/button _variant="transparent" _alpineClick="previous()" _css="absolute z-10 flex items-center justify-center left-4 bottom-4 sm:left-5 sm:bottom-5" _onBackground=true}}
                     {{> components/button/components/button_icon _icon="arrow-left" _iconmap="icons" _css="w-8 h-8 sm:w-11 sm:h-11 py-1 sm:py-2 fill-link dark:fill-link-dark" }}
             {{/components/button/button}}
@@ -14,8 +15,11 @@
                 {{> components/button/components/button_icon _icon="arrow-right" _iconmap="icons" _css="w-8 h-8 sm:w-11 sm:h-11 py-1 sm:py-2 fill-link dark:fill-link-dark" }}
             {{/components/button/button}}
         </div>
+        <div class="absolute inset-0 z-20 flex items-center justify-center ar-16-9" aria-hidden="true" x-show="loading">
+            {{> components/base/image/icon _icon="loading" _addClass="animate-spin animate-infinite h-8 w-8 md:w-11 md:h-11 fill-link dark:fill-link-dark" }}
+        </div>
         {{#each this.items}}
-         {{~> components/content/copytext/components/gallery/galleryitem_figure _mediaBacklinkToStoryTeaser=../../this.toModel.mediaBacklinkToStoryTeaser _cssClassCaption=../../_cssClassCaption ~}}
+            {{~> components/content/copytext/components/gallery/galleryitem_figure _mediaBacklinkToStoryTeaser=../../this.toModel.mediaBacklinkToStoryTeaser _cssClassCaption=../../_cssClassCaption ~}}
         {{/each}}
     </div>
 </div>

package/dist/views_static/components/content/copytext/components/gallery/galleryitem_description_copytext.hbs

@@ -1,4 +1,4 @@
-<figcaption class="gallery-slider__caption">
+<figcaption class="js-gallery-slider-caption">
     {{~#> components/content/copytext/components/image/caption _isFullTextVisible=true  _cssClassCaption=_cssClassCaption~}}
         <span class="block font-bold">{{loca "gallery_image_number"}} {{this.number}}/{{this.totalNumber}} {{~#with this.title}} <span class="mx-1.5">|</span>{{this}}{{/with~}}</span>
         {{#if this.caption}} {{~> components/content/copytext/components/image/image_caption_text~}} {{/if}}

package/dist/views_static/components/content/copytext/components/gallery/galleryitem_figure.hbs

@@ -1,5 +1,5 @@
 <figure {{#unless @first}} x-cloak {{/unless}}>
-    <div class="relative ar-16-9 gallery-slider__image animate-duration-500 animate-delay-100 animate-once animate-ease-in-out" 
+    <div class="relative ar-16-9 js-gallery-slider-image animate-duration-500 animate-delay-100 animate-once animate-ease-in-out" 
         :class="animationEnabled ? (slideToRight ? 'animate-fade-left' : 'animate-fade-right') : ''">
         {{~#if this.displayOriginal.isTrue ~}}
             <div class="relative" aria-hidden="true">
@@ -16,16 +16,19 @@
                 _type="gallery"
                 _variant="portrait"
                 _addClass="absolute top-0 left-0 right-0 bottom-0"
-                _addClassImg="!w-auto h-full absolute left-1/2 -translate-x-1/2"
+                _addClassImg="!w-auto h-full absolute left-1/2 -translate-x-1/2 js-gallery-image"
                 _noDelay=(if @first true '')
-                _isWebview=true}}
+                _isWebview=true
+                _loadHandler="handleImageLoad($event)"}}
         {{else}}
             {{> components/base/image/responsive_image  
                 _type="gallery" 
                 _variant="default" 
                 _addClass="ar-16-9"
+                _addClassImg="js-gallery-image"
                 _noDelay=(if @first true '')
-                _isWebview=true}}
+                _isWebview=true
+                _loadHandler="handleImageLoad($event)"}}
         {{~/if~}}
     </div>
     {{~> components/content/copytext/components/gallery/galleryitem_description_copytext _mediaBacklinkToStoryTeaser=_mediaBacklinkToStoryTeaser _cssClassCaption=_cssClassCaption~}}

package/package.json

@@ -6,7 +6,7 @@
   "license": "MIT",
   "main": "dist/index.js",
   "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-  "version": "1.114.83",
+  "version": "1.114.84",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006 public",

package/src/stories/views/components/base/image/responsive_image.hbs

@@ -20,7 +20,7 @@
                            {{#with this.srcset}} srcset="{{this}}"{{/with}}>
                 {{/each}}
             {{/with}}
-                <img {{#if ../_isWebview}}data-primary-type="hr-nt:image" data-image-id="{{nextRandom}}"{{/if}} class="w-full{{~#if ../_addClassImg}} {{../_addClassImg}}{{/if}}" loading="{{#if ../_noDelay}}auto{{else}}lazy{{/if}}"{{#if ../_noDelay}} fetchpriority="high"{{/if}} src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="{{#if ../_alttext}}{{../_alttext}}{{else}}{{../this.alttext}}{{/if}}" {{~#if ../_title}} title="{{../_title}}"{{~/if}} {{~#if ../_errorHandler }} onerror="this.onerror=null; {{../_errorHandler}}"{{/if}}>
+                <img {{#if ../_isWebview}}data-primary-type="hr-nt:image" data-image-id="{{nextRandom}}"{{/if}} class="w-full{{~#if ../_addClassImg}} {{../_addClassImg}}{{/if}}" loading="{{#if ../_noDelay}}auto{{else}}lazy{{/if}}"{{#if ../_noDelay}} fetchpriority="high"{{/if}} src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="{{#if ../_alttext}}{{../_alttext}}{{else}}{{../this.alttext}}{{/if}}" {{~#if ../_title}} title="{{../_title}}"{{~/if}} {{~#if ../_errorHandler }} onerror="this.onerror=null; {{../_errorHandler}}"{{/if}} {{~#if ../../_loadHandler}} x-on:load="{{../../_loadHandler}}" {{~/if}}>
         </picture>
         {{#unless _disableNoScript}}
             <noscript>
@@ -49,7 +49,8 @@
                 alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}"
                 class="w-full{{~#with ../../_addClassImg }} {{this}}{{/with}}"
                 {{~#if ../../_title}} title="{{../../_title}}"{{~/if}}
-                {{~#if ../../_errorHandler}} onerror="this.onerror=null; {{../../_errorHandler}}" {{~/if}}>
+                {{~#if ../../_errorHandler}} onerror="this.onerror=null; {{../../_errorHandler}}" {{~/if}}
+                {{~#if ../../_loadHandler}} x-on:load="{{../../_loadHandler}}" {{~/if}}>
             {{~#with ../../_addClass }}</div>{{/with}}
         {{/with}}
     {{/if}}

package/src/stories/views/components/content/copytext/components/gallery/galleryitem_copytext.hbs

@@ -1,12 +1,13 @@
+{{~changeRandom~}}
 {{~#with this.gallery ~}}
-<div class="relative w-full overflow-hidden" x-on:touchstart="handleTouchStart($event)" x-on:touchmove="handleTouchMove($event)" x-on:touchend="handleTouchEnd()"
-    x-data="gallerySlider()"
+<div class="relative w-full overflow-hidden js-gallery{{getRandom}}" x-on:touchstart="handleTouchStart($event)" x-on:touchmove="handleTouchMove($event)" x-on:touchend="handleTouchEnd()"
+    x-data="gallerySlider('js-gallery{{getRandom}}')"
     x-init="loadSlider()"
     ax-load
     x-ignore
      >
     <div class="relative w-full select-none">
-        <div class="absolute top-0 bottom-0 left-0 right-0 ar-16-9">
+        <div class="absolute top-0 bottom-0 left-0 right-0 z-30 ar-16-9">
             {{#> components/button/button _variant="transparent" _alpineClick="previous()" _css="absolute z-10 flex items-center justify-center left-4 bottom-4 sm:left-5 sm:bottom-5" _onBackground=true}}
                     {{> components/button/components/button_icon _icon="arrow-left" _iconmap="icons" _css="w-8 h-8 sm:w-11 sm:h-11 py-1 sm:py-2 fill-link dark:fill-link-dark" }}
             {{/components/button/button}}
@@ -14,8 +15,11 @@
                 {{> components/button/components/button_icon _icon="arrow-right" _iconmap="icons" _css="w-8 h-8 sm:w-11 sm:h-11 py-1 sm:py-2 fill-link dark:fill-link-dark" }}
             {{/components/button/button}}
         </div>
+        <div class="absolute inset-0 z-20 flex items-center justify-center ar-16-9" aria-hidden="true" x-show="loading">
+            {{> components/base/image/icon _icon="loading" _addClass="animate-spin animate-infinite h-8 w-8 md:w-11 md:h-11 fill-link dark:fill-link-dark" }}
+        </div>
         {{#each this.items}}
-         {{~> components/content/copytext/components/gallery/galleryitem_figure _mediaBacklinkToStoryTeaser=../../this.toModel.mediaBacklinkToStoryTeaser-adjust_context _cssClassCaption=../../_cssClassCaption ~}}
+            {{~> components/content/copytext/components/gallery/galleryitem_figure _mediaBacklinkToStoryTeaser=../../this.toModel.mediaBacklinkToStoryTeaser-adjust_context _cssClassCaption=../../_cssClassCaption ~}}
         {{/each}}
     </div>
 </div>

package/src/stories/views/components/content/copytext/components/gallery/galleryitem_description_copytext.hbs

@@ -1,4 +1,4 @@
-<figcaption class="gallery-slider__caption">
+<figcaption class="js-gallery-slider-caption">
     {{~#> components/content/copytext/components/image/caption _isFullTextVisible=true  _cssClassCaption=_cssClassCaption~}}
         <span class="block font-bold">{{loca "gallery_image_number"}} {{this.number}}/{{this.totalNumber}} {{~#with this.title}} <span class="mx-1.5">|</span>{{this}}{{/with~}}</span>
         {{#if this.caption}} {{~> components/content/copytext/components/image/image_caption_text~}} {{/if}}

package/src/stories/views/components/content/copytext/components/gallery/galleryitem_figure.hbs

@@ -1,5 +1,5 @@
 <figure {{#unless @first}} x-cloak {{/unless}}>
-    <div class="relative ar-16-9 gallery-slider__image animate-duration-500 animate-delay-100 animate-once animate-ease-in-out" 
+    <div class="relative ar-16-9 js-gallery-slider-image animate-duration-500 animate-delay-100 animate-once animate-ease-in-out" 
         :class="animationEnabled ? (slideToRight ? 'animate-fade-left' : 'animate-fade-right') : ''">
         {{~#if this.displayOriginal.isTrue ~}}
             <div class="relative" aria-hidden="true">
@@ -16,16 +16,19 @@
                 _type="gallery"
                 _variant="portrait"
                 _addClass="absolute top-0 left-0 right-0 bottom-0"
-                _addClassImg="!w-auto h-full absolute left-1/2 -translate-x-1/2"
+                _addClassImg="!w-auto h-full absolute left-1/2 -translate-x-1/2 js-gallery-image"
                 _noDelay=(if @first true '')
-                _isWebview=true}}
+                _isWebview=true
+                _loadHandler="handleImageLoad($event)"}}
         {{else}}
             {{> components/base/image/responsive_image  
                 _type="gallery" 
                 _variant="default" 
                 _addClass="ar-16-9"
+                _addClassImg="js-gallery-image"
                 _noDelay=(if @first true '')
-                _isWebview=true}}
+                _isWebview=true
+                _loadHandler="handleImageLoad($event)"}}
         {{~/if~}}
     </div>
     {{~> components/content/copytext/components/gallery/galleryitem_description_copytext _mediaBacklinkToStoryTeaser=_mediaBacklinkToStoryTeaser _cssClassCaption=_cssClassCaption~}}

package/src/stories/views/components/content/copytext/components/gallery/js/gallerySlider.alpine.js

@@ -1,4 +1,4 @@
-export default function gallerySlider() {
+export default function gallerySlider(gallerySelector) {
     return { 
         slides: [],
         captions: [],
@@ -8,23 +8,30 @@ export default function gallerySlider() {
         touchStartX: null,
         touchEndX: null,
         swipeThreshold: 50,
+        loadedImages: [],
+        loading: true,
         previous() {
             this.animationEnabled = true;
             this.slideToRight = false;    
-            this.currentSlideIndex = (this.currentSlideIndex - 1 > 0) ? this.currentSlideIndex - 1 : this.slides.length;            
+            this.currentSlideIndex = (this.currentSlideIndex - 1 > 0) ? this.currentSlideIndex - 1 : this.slides.length;
+            this.updateLoadingState(this.currentSlideIndex - 1);          
         },            
-        next() {                
+        next() {  
             if (this.slides.length > 0) {
                 this.animationEnabled = true;
                 this.slideToRight = true;
                 this.currentSlideIndex = (this.currentSlideIndex % this.slides.length) + 1;
             }
+            this.updateLoadingState(this.currentSlideIndex - 1);  
         },
         loadSlider() {
-            this.slides = [...document.querySelectorAll('.gallery-slider__image')];
-            this.slides.forEach((slide, index) => slide.setAttribute('x-show', `currentSlideIndex === ${index + 1}`));
-            this.captions = [...document.querySelectorAll('.gallery-slider__caption')];
-            this.captions.forEach((caption, index) => caption.setAttribute('x-show', `currentSlideIndex === ${index + 1}`));
+            const galleryContainer = document.querySelector(`.${gallerySelector}`);
+            if (galleryContainer) {
+                this.slides = [...galleryContainer.querySelectorAll('.js-gallery-slider-image')];
+                this.slides.forEach((slide, index) => slide.setAttribute('x-show', `currentSlideIndex === ${index + 1}`));
+                this.captions = [...galleryContainer.querySelectorAll('.js-gallery-slider-caption')];
+                this.captions.forEach((caption, index) => caption.setAttribute('x-show', `currentSlideIndex === ${index + 1}`));
+            }
         },
         handleTouchStart(event) {
             this.touchStartX = event.touches[0].clientX
@@ -43,7 +50,19 @@ export default function gallerySlider() {
                 this.touchStartX = null
                 this.touchEndX = null
             }
+        },
+        handleImageLoad(event) {
+           const img = event.target; 
+            if (img.complete) {
+                this.loading = false;
+                this.loadedImages.push(img);
+            }          
+        },
+        updateLoadingState(currentSlideIndex) {
+            const currentSlide = this.slides[currentSlideIndex];
+            if (currentSlide) {
+                this.loading = !this.loadedImages.includes(currentSlide.querySelector('.js-gallery-image'));
+            }
         }
-
     };
 }