From 6b1ee354c15273944be0409836b455169de846ee Mon Sep 17 00:00:00 2001
From: Lars Gebhardt-Kusche <lars@kusche.berlin>
Date: Mon, 27 Jul 2026 23:47:21 +0200
Subject: [PATCH] ycyxc

---
 public/assets/js/app.js | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/public/assets/js/app.js b/public/assets/js/app.js
index b302948..a9415f8 100755
--- a/public/assets/js/app.js
+++ b/public/assets/js/app.js
@@ -793,7 +793,7 @@ document.addEventListener('DOMContentLoaded', () => {
     return activeTab?.getAttribute('data-avatar-component-tab') || 'avatar_lorelei_eyes_variant';
   };
 
-  const setAvatarLoaderState = (form, active, loaded = 0, total = 0, label = 'Varianten werden geladen') => {
+  const setAvatarLoaderState = (form, active, loaded = 0, total = 0, label = 'Varianten werden geladen', runId = '') => {
     const loader = form.querySelector('[data-avatar-loader]');
     const fill = form.querySelector('[data-avatar-loader-fill]');
     const progress = form.querySelector('[data-avatar-loader-progress]');
@@ -801,6 +801,10 @@ document.addEventListener('DOMContentLoaded', () => {
     if (!loader || !fill || !progress || !labelNode) return;
 
     if (!active) {
+      if (runId && form.dataset.avatarActiveLoadRun && form.dataset.avatarActiveLoadRun !== runId) {
+        return;
+      }
+      form.dataset.avatarActiveLoadRun = '';
       loader.hidden = true;
       fill.style.width = '0%';
       progress.textContent = '0%';
@@ -808,6 +812,9 @@ document.addEventListener('DOMContentLoaded', () => {
       return;
     }
 
+    if (runId) {
+      form.dataset.avatarActiveLoadRun = runId;
+    }
     const percent = total > 0 ? Math.max(0, Math.min(100, Math.round((loaded / total) * 100))) : 0;
     loader.hidden = false;
     fill.style.width = `${percent}%`;
@@ -830,8 +837,8 @@ document.addEventListener('DOMContentLoaded', () => {
     const label = activeField
       ? `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)}`;
+    setAvatarLoaderState(form, true, 0, images.length, label, loadRunId);
 
     images.forEach((image) => {
       const field = image.getAttribute('data-avatar-option-field') || '';
@@ -839,7 +846,7 @@ document.addEventListener('DOMContentLoaded', () => {
       const params = buildAvatarParams(form, { [field]: value });
       if (!params) {
         loaded += 1;
-        setAvatarLoaderState(form, true, loaded, images.length, label);
+        setAvatarLoaderState(form, true, loaded, images.length, label, loadRunId);
         return;
       }
 
@@ -847,9 +854,9 @@ document.addEventListener('DOMContentLoaded', () => {
       image.dataset.avatarLoadRun = loadRunId;
       if (image.dataset.avatarLoadedSrc === src) {
         loaded += 1;
-        setAvatarLoaderState(form, true, loaded, images.length, label);
+        setAvatarLoaderState(form, true, loaded, images.length, label, loadRunId);
         if (loaded >= images.length) {
-          window.setTimeout(() => setAvatarLoaderState(form, false), 180);
+          window.setTimeout(() => setAvatarLoaderState(form, false, 0, 0, 'Varianten werden geladen', loadRunId), 180);
         }
         return;
       }
@@ -859,9 +866,9 @@ document.addEventListener('DOMContentLoaded', () => {
         if (finished || image.dataset.avatarLoadRun !== loadRunId) return;
         finished = true;
         loaded += 1;
-        setAvatarLoaderState(form, true, loaded, images.length, label);
+        setAvatarLoaderState(form, true, loaded, images.length, label, loadRunId);
         if (loaded >= images.length) {
-          window.setTimeout(() => setAvatarLoaderState(form, false), 180);
+          window.setTimeout(() => setAvatarLoaderState(form, false, 0, 0, 'Varianten werden geladen', loadRunId), 180);
         }
       };