From df5c93028c32aaff2c416584c1f975cfd93befa7 Mon Sep 17 00:00:00 2001
From: Sergio Visinoni <piffio@piffio.org>
Date: Thu, 23 Apr 2026 18:36:26 +0200
Subject: [PATCH 1/2] fix: fix progress bar not updating during CSV import

- Reduce BATCH_SIZE from 50 to 5 for more granular progress updates
- Add microtask yield before import loop so Svelte paints 0% bar
- Update UI hint to reflect new batch size

The progress bar was frozen at 0% because the single API call blocked
the browser's render loop before Svelte could paint. Smaller batches
give real, visible progress updates without backend changes.
---
 frontend/src/routes/dashboard/import/+page.svelte | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/src/routes/dashboard/import/+page.svelte b/frontend/src/routes/dashboard/import/+page.svelte
index e264629..f6206a5 100644
--- a/frontend/src/routes/dashboard/import/+page.svelte
+++ b/frontend/src/routes/dashboard/import/+page.svelte
@@ -106,7 +106,7 @@
   let skipInvalidRows = $state(true);
 
   // ── Step 5: Progress + Results ────────────────────────────────────────────
-  const BATCH_SIZE = 50;
+  const BATCH_SIZE = 5;
   const MAX_SHORT_CODE_LENGTH = 100;
   let progress = $state(0); // 0-100
   let importDone = $state(false);
@@ -413,6 +413,9 @@
       return;
     }
 
+    // Yield to the browser so Svelte can paint the 0% state before the first request
+    await new Promise((r) => setTimeout(r, 0));
+
     const chunks: ImportLinkRow[][] = [];
     for (let i = 0; i < rows.length; i += BATCH_SIZE) {
       chunks.push(rows.slice(i, i + BATCH_SIZE));
@@ -569,7 +572,7 @@
               : "Drag and drop a CSV file, or click to browse"}
           </p>
           <p class="text-xs text-gray-400 mt-1">
-            Supports .csv files up to any size (batched in chunks of 50)
+            Supports .csv files up to any size (batched in chunks of 5)
           </p>
         </label>
 

From b1febca1a372e21876fd111d67884b3721d6650c Mon Sep 17 00:00:00 2001
From: Sergio Visinoni <piffio@piffio.org>
Date: Thu, 23 Apr 2026 21:30:42 +0200
Subject: [PATCH 2/2] add animated background bar

---
 .../src/routes/dashboard/import/+page.svelte  | 28 ++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/frontend/src/routes/dashboard/import/+page.svelte b/frontend/src/routes/dashboard/import/+page.svelte
index f6206a5..203d710 100644
--- a/frontend/src/routes/dashboard/import/+page.svelte
+++ b/frontend/src/routes/dashboard/import/+page.svelte
@@ -468,6 +468,30 @@
 
 <svelte:head>
   <title>Import Links - Rushomon</title>
+  <style>
+    @keyframes progress-stripes {
+      from {
+        background-position: 40px 0;
+      }
+      to {
+        background-position: 0 0;
+      }
+    }
+    .progress-animated {
+      background-image: linear-gradient(
+        45deg,
+        rgba(255, 255, 255, 0.15) 25%,
+        transparent 25%,
+        transparent 50%,
+        rgba(255, 255, 255, 0.15) 50%,
+        rgba(255, 255, 255, 0.15) 75%,
+        transparent 75%,
+        transparent
+      );
+      background-size: 40px 40px;
+      animation: progress-stripes 1s linear infinite;
+    }
+  </style>
 </svelte:head>
 
 <div class="min-h-screen bg-gray-50">
@@ -876,7 +900,9 @@
           <p class="text-sm text-gray-500 mb-6">
             Please wait. Don't close this tab.
           </p>
-          <div class="w-full bg-gray-200 rounded-full h-3 mb-2">
+          <div
+            class="w-full bg-gray-200 rounded-full h-3 mb-2 progress-animated"
+          >
             <div
               class="bg-gradient-to-r from-orange-500 to-orange-600 h-3 rounded-full transition-all duration-300"
               style="width: {progress}%"