From 55370ad76006c0559d68cd59e9b9fc4ccb567d7d Mon Sep 17 00:00:00 2001
From: Honey <me_honeyy@proton.me>
Date: Thu, 14 May 2026 18:01:34 +0200
Subject: [PATCH] feat: show iTunes enrichment status indicator in Spotify
 importer

---
 index.html     |  1 +
 src/spotify.js | 25 +++++++++++++++++++++++++
 styles.css     |  3 +++
 3 files changed, 29 insertions(+)

diff --git a/index.html b/index.html
index decc656..974afc1 100644
--- a/index.html
+++ b/index.html
@@ -376,6 +376,7 @@
         </div>
         <div id="spotify-preview" style="display:none;margin-top:20px">
           <div id="spotify-preview-inner"></div>
+          <div id="spotify-enrich-status" style="display:none"></div>
           <div id="spotify-tracks-section" style="display:none">
             <div class="section-header" style="margin-top:8px">
               <span class="section-title" id="spotify-tracks-title">Tracks</span>
diff --git a/src/spotify.js b/src/spotify.js
index 73e2f25..b4fc9e5 100644
--- a/src/spotify.js
+++ b/src/spotify.js
@@ -189,6 +189,26 @@ function _renderSpotifyPreview(data) {
   }
 }
 
+function _setEnrichStatus(done, current, total) {
+  const el = document.getElementById('spotify-enrich-status');
+  if (!el) return;
+  if (done) {
+    el.className = 'done';
+    el.innerHTML = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg> iTunes-Daten geladen';
+    el.style.display = 'flex';
+    el.style.opacity = '1';
+    setTimeout(() => {
+      el.style.opacity = '0';
+      setTimeout(() => { el.style.display = 'none'; el.className = ''; }, 400);
+    }, 2000);
+  } else {
+    el.className = '';
+    el.innerHTML = `<div class="enrich-spinner"></div> Lade iTunes-Daten… (${current}/${total})`;
+    el.style.display = 'flex';
+    el.style.opacity = '1';
+  }
+}
+
 async function _loadSpotifyTrackArtwork(tracks, listEl) {
   const artEls = listEl.querySelectorAll('.gtrack-art');
 
@@ -203,6 +223,8 @@ async function _loadSpotifyTrackArtwork(tracks, listEl) {
 
   // Enrich each track with iTunes data — same call as global search
   const CONC = 4;
+  let enriched = 0;
+  _setEnrichStatus(false, 0, tracks.length);
   for (let i = 0; i < tracks.length; i += CONC) {
     const batch = tracks.slice(i, i + CONC);
     await Promise.all(batch.map(async (t, bi) => {
@@ -239,8 +261,11 @@ async function _loadSpotifyTrackArtwork(tracks, listEl) {
           }
         }
       } catch { /* non-critical */ }
+      enriched++;
+      _setEnrichStatus(false, enriched, tracks.length);
     }));
   }
+  _setEnrichStatus(true);
 }
 
 function _startRateLimitCountdown(inner, totalSecs) {
diff --git a/styles.css b/styles.css
index 69ee737..4d6e0cb 100644
--- a/styles.css
+++ b/styles.css
@@ -723,6 +723,9 @@ nav{flex:1;overflow-y:auto;padding:4px 10px}
 .list-search{width:100%;box-sizing:border-box;padding:8px 12px 8px 32px;background:var(--surface);border:1px solid var(--border2);border-radius:8px;color:var(--text1);font-size:13px;font-family:var(--font);outline:none;transition:border-color .15s}
 .list-search:focus{border-color:var(--accent)}
 .list-search::placeholder{color:var(--text3)}
+#spotify-enrich-status{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text2);padding:8px 12px;margin-bottom:8px;background:var(--surface);border:1px solid var(--border2);border-radius:8px;transition:opacity .4s}
+#spotify-enrich-status.done{color:var(--accent)}
+#spotify-enrich-status .enrich-spinner{width:12px;height:12px;border:2px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}
 .topsong-item{display:grid;grid-template-columns:28px 44px 1fr auto;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;cursor:pointer;transition:background .15s}
 .topsong-item:hover{background:var(--surface)}
 .topsong-num{font-size:11px;color:var(--text3);font-family:var(--mono);text-align:center}