asdd

public/assets/js/app.js

@@ -831,6 +831,7 @@ document.addEventListener('DOMContentLoaded', () => {
       ? `Varianten fuer ${form.querySelector(`[data-avatar-component-tab="${activeField}"]`)?.textContent?.trim() || 'diesen Bereich'}`
       : 'Varianten werden geladen';
     setAvatarLoaderState(form, true, 0, images.length, label);
+    const loadRunId = `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
 
     images.forEach((image) => {
       const field = image.getAttribute('data-avatar-option-field') || '';
@@ -843,6 +844,7 @@ document.addEventListener('DOMContentLoaded', () => {
       }
 
       const src = `${avatarEndpoint}?${params.toString()}`;
+      image.dataset.avatarLoadRun = loadRunId;
       if (image.dataset.avatarLoadedSrc === src) {
         loaded += 1;
         setAvatarLoaderState(form, true, loaded, images.length, label);
@@ -852,8 +854,10 @@ document.addEventListener('DOMContentLoaded', () => {
         return;
       }
 
-      const preload = new Image();
+      let finished = false;
       const finalize = () => {
+        if (finished || image.dataset.avatarLoadRun !== loadRunId) return;
+        finished = true;
         loaded += 1;
         setAvatarLoaderState(form, true, loaded, images.length, label);
         if (loaded >= images.length) {
@@ -861,13 +865,20 @@ document.addEventListener('DOMContentLoaded', () => {
         }
       };
 
-      preload.onload = () => {
-        image.src = src;
+      const timeoutId = window.setTimeout(() => {
+        finalize();
+      }, 2500);
+
+      image.onload = () => {
+        window.clearTimeout(timeoutId);
         image.dataset.avatarLoadedSrc = src;
         finalize();
       };
-      preload.onerror = finalize;
-      preload.src = src;
+      image.onerror = () => {
+        window.clearTimeout(timeoutId);
+        finalize();
+      };
+      image.src = src;
     });
   };