add download progress bar

frontend/index.html

@@ -470,13 +470,61 @@ input[type="range"]::-webkit-slider-thumb:hover {
   transition: all 0.15s;
 }
 
-.btn-download:hover {
+.btn-download:hover:not(:disabled) {
   background: var(--teal);
   color: white;
   transform: translateY(-1px);
   box-shadow: var(--shadow-md);
 }
 
+.btn-download:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+  transform: none;
+}
+
+/* Download progress bar */
+.download-progress-wrap {
+  margin-top: 0.65rem;
+  display: none;
+}
+
+.download-progress-wrap.show { display: block; }
+
+.download-progress-track {
+  height: 4px;
+  background: var(--border);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.download-progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--teal), #6B8FCF);
+  border-radius: 2px;
+  width: 0%;
+  transition: width 0.3s ease;
+}
+
+.download-progress-label {
+  font-size: 12px;
+  color: var(--ink2);
+  margin-top: 0.3rem;
+  text-align: center;
+}
+
+@keyframes indeterminate {
+  0%   { left: -40%; width: 40%; }
+  60%  { left: 100%; width: 40%; }
+  100% { left: 100%; width: 40%; }
+}
+
+.download-progress-fill.indeterminate {
+  position: relative;
+  width: 40%;
+  animation: indeterminate 1.4s ease infinite;
+}
+
 /* ── Footer ──────────────────────────── */
 footer {
   margin-top: 4rem;
@@ -636,6 +684,12 @@ footer a:hover { color: var(--ink); }
       <button class="btn-download" id="downloadBtn" onclick="triggerDownload()">
         ⬇ Download Bootstrapped ZIP
       </button>
+      <div class="download-progress-wrap" id="dlProgressWrap">
+        <div class="download-progress-track">
+          <div class="download-progress-fill indeterminate" id="dlProgressFill"></div>
+        </div>
+        <div class="download-progress-label" id="dlProgressLabel">Preparing ZIP…</div>
+      </div>
     </div>
   </div>
 
@@ -787,19 +841,73 @@ async function startJob() {
 async function triggerDownload() {
   const jobId = document.getElementById('downloadBtn').dataset.jobId;
   if (!jobId) return;
+
+  const btn       = document.getElementById('downloadBtn');
+  const wrap      = document.getElementById('dlProgressWrap');
+  const fill      = document.getElementById('dlProgressFill');
+  const label     = document.getElementById('dlProgressLabel');
+
+  btn.disabled    = true;
+  btn.textContent = 'Preparing download…';
+  wrap.classList.add('show');
+  fill.classList.add('indeterminate');
+  label.textContent = 'Fetching ZIP from server…';
+
   try {
     const res = await fetch(`/api/download/${jobId}`);
     if (!res.ok) throw new Error('Download failed');
-    const blob = await res.blob();
-    const url  = URL.createObjectURL(blob);
-    const a    = document.createElement('a');
+
+    const contentLength = res.headers.get('Content-Length');
+    let blob;
+
+    if (contentLength) {
+      // Real progress from Content-Length
+      const total = parseInt(contentLength);
+      const chunks = [];
+      let received = 0;
+      const reader = res.body.getReader();
+      fill.classList.remove('indeterminate');
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        chunks.push(value);
+        received += value.length;
+        const pct = Math.min(Math.round(received / total * 100), 99);
+        fill.style.width = pct + '%';
+        label.textContent = `Downloading… ${pct}%`;
+      }
+      blob = new Blob(chunks, { type: 'application/zip' });
+    } else {
+      // No content-length — just show spinner until done
+      label.textContent = 'Downloading…';
+      blob = await res.blob();
+    }
+
+    fill.classList.remove('indeterminate');
+    fill.style.width = '100%';
+    label.textContent = 'Done!';
+
+    const url = URL.createObjectURL(blob);
+    const a   = document.createElement('a');
     a.href     = url;
     a.download = 'geneExpr_bootstrapped.zip';
     document.body.appendChild(a);
     a.click();
     document.body.removeChild(a);
     URL.revokeObjectURL(url);
+
+    setTimeout(() => {
+      btn.disabled    = false;
+      btn.textContent = '⬇ Download Bootstrapped ZIP';
+      wrap.classList.remove('show');
+      fill.style.width = '0%';
+    }, 2000);
+
   } catch (e) {
+    btn.disabled    = false;
+    btn.textContent = '⬇ Download Bootstrapped ZIP';
+    wrap.classList.remove('show');
     alert('Download failed: ' + e.message);
   }
 }