From 0d26cb6b0df40ebf48ad441e808b30475cebd856 Mon Sep 17 00:00:00 2001
From: csr4422 <csr935640@gmail.com>
Date: Sun, 4 Jan 2026 21:09:26 +0530
Subject: [PATCH] fix: improve import UX with immediate logs and auto-scroll

---
 .../src/components/ui/importer/Importer.vue   | 39 ++++++++++++++++---
 1 file changed, 33 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/ui/importer/Importer.vue b/frontend/src/components/ui/importer/Importer.vue
index 7aff1603..6aac0d12 100644
--- a/frontend/src/components/ui/importer/Importer.vue
+++ b/frontend/src/components/ui/importer/Importer.vue
@@ -89,10 +89,10 @@
             </Alert>
 
             <!-- Logs -->
-            <div>
+           <div>
               <p class="text-sm font-medium mb-2">Import logs</p>
               <Card class="p-3">
-                <div class="bg-black text-white p-3 rounded-md text-xs font-mono max-h-60 overflow-y-auto space-y-1">
+                <div class="bg-black text-white p-3 rounded-md text-xs font-mono max-h-60 overflow-y-auto space-y-1 logs-scroll-container">
                   <div v-for="(log, idx) in status.logs" :key="idx">
                     {{ log }}
                   </div>
@@ -172,6 +172,15 @@ const startImport = async () => {
 
   error.value = ''
   importing.value = true
+  
+  // Initialize empty status to show logs area immediately
+  status.value = {
+    running: true,
+    logs: ['Uploading CSV file...'],
+    total: 0,
+    success: 0,
+    errors: 0
+  }
 
   const formData = new FormData()
   formData.append('file', file.value)
@@ -184,22 +193,24 @@ const startImport = async () => {
       }
     })
 
+    // Update log after successful upload
+    status.value.logs.push('CSV uploaded successfully, starting import...')
     startPolling()
   } catch (err) {
     error.value = err.response?.data?.message || err.message || 'Upload failed'
     importing.value = false
+    status.value = null
   }
 }
 
-const startPolling = () => {
-  pollInterval.value = setInterval(fetchStatus, 1000)
-}
-
 const fetchStatus = async () => {
   try {
     const res = await axios.get('/api/v1/agents/import/status')
     status.value = res.data.data
 
+    // Auto-scroll logs to bottom
+    scrollLogsToBottom()
+
     if (!status.value.running) {
       stopPolling()
       importing.value = false
@@ -212,6 +223,22 @@ const fetchStatus = async () => {
   }
 }
 
+const scrollLogsToBottom = () => {
+  // Use nextTick to ensure DOM is updated before scrolling
+  import('vue').then(({ nextTick }) => {
+    nextTick(() => {
+      const logsContainer = document.querySelector('.logs-scroll-container')
+      if (logsContainer) {
+        logsContainer.scrollTop = logsContainer.scrollHeight
+      }
+    })
+  })
+}
+
+const startPolling = () => {
+  pollInterval.value = setInterval(fetchStatus, 1000)
+}
+
 const stopPolling = () => {
   if (pollInterval.value) {
     clearInterval(pollInterval.value)