Avatar

public/assets/js/app.js

@@ -793,19 +793,81 @@ 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 loader = form.querySelector('[data-avatar-loader]');
+    const fill = form.querySelector('[data-avatar-loader-fill]');
+    const progress = form.querySelector('[data-avatar-loader-progress]');
+    const labelNode = form.querySelector('[data-avatar-loader-label]');
+    if (!loader || !fill || !progress || !labelNode) return;
+
+    if (!active) {
+      loader.hidden = true;
+      fill.style.width = '0%';
+      progress.textContent = '0%';
+      labelNode.textContent = label;
+      return;
+    }
+
+    const percent = total > 0 ? Math.max(0, Math.min(100, Math.round((loaded / total) * 100))) : 0;
+    loader.hidden = false;
+    fill.style.width = `${percent}%`;
+    progress.textContent = `${percent}%`;
+    labelNode.textContent = label;
+  };
+
   const updateAvatarOptionPreviews = (form, activeField = null) => {
     const selector = activeField
       ? `[data-avatar-component-panel="${activeField}"] [data-avatar-option-thumb]`
       : '[data-avatar-option-thumb]';
 
-    form.querySelectorAll(selector).forEach((image) => {
+    const images = Array.from(form.querySelectorAll(selector));
+    if (!images.length) {
+      setAvatarLoaderState(form, false);
+      return;
+    }
+
+    let loaded = 0;
+    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);
+
+    images.forEach((image) => {
       const field = image.getAttribute('data-avatar-option-field') || '';
       const value = image.getAttribute('data-avatar-option-value') || '';
       const params = buildAvatarParams(form, { [field]: value });
-      if (!params) return;
+      if (!params) {
+        loaded += 1;
+        setAvatarLoaderState(form, true, loaded, images.length, label);
+        return;
+      }
 
-      image.dataset.avatarLoaded = 'true';
-      image.src = `${avatarEndpoint}?${params.toString()}`;
+      const src = `${avatarEndpoint}?${params.toString()}`;
+      if (image.dataset.avatarLoadedSrc === src) {
+        loaded += 1;
+        setAvatarLoaderState(form, true, loaded, images.length, label);
+        if (loaded >= images.length) {
+          window.setTimeout(() => setAvatarLoaderState(form, false), 180);
+        }
+        return;
+      }
+
+      const preload = new Image();
+      const finalize = () => {
+        loaded += 1;
+        setAvatarLoaderState(form, true, loaded, images.length, label);
+        if (loaded >= images.length) {
+          window.setTimeout(() => setAvatarLoaderState(form, false), 180);
+        }
+      };
+
+      preload.onload = () => {
+        image.src = src;
+        image.dataset.avatarLoadedSrc = src;
+        finalize();
+      };
+      preload.onerror = finalize;
+      preload.src = src;
     });
   };
 
@@ -880,7 +942,10 @@ document.addEventListener('DOMContentLoaded', () => {
     form.querySelectorAll('[data-avatar-component-tab]').forEach((button) => {
       button.addEventListener('click', () => {
         const field = button.getAttribute('data-avatar-component-tab');
-        if (field) setActiveComponentPanel(field);
+        if (field) {
+          ensureAvatarBuilderLoaded(form);
+          setActiveComponentPanel(field);
+        }
       });
     });
 
@@ -939,6 +1004,14 @@ document.addEventListener('DOMContentLoaded', () => {
     ensureAvatarBuilderLoaded(form);
   });
 
+  document.querySelectorAll('[data-modal-open="modalAvatar"]').forEach((button) => {
+    button.addEventListener('click', () => {
+      const form = document.querySelector('#modalAvatar [data-avatar-builder]');
+      if (!form) return;
+      window.setTimeout(() => ensureAvatarBuilderLoaded(form), 20);
+    });
+  });
+
   document.querySelectorAll('[data-nav-events]').forEach(link => {
     link.addEventListener('click', async () => {
       if (window.location.pathname === '/' && window.location.hash === '#events') {