fix loading icon

src/server/web/static/css/styles.css

@@ -869,10 +869,6 @@ body {
   .process-status {
     gap: 4px;
   }
-
-  .status-text {
-    font-size: 0.8rem;
-  }
 }
 
 @media (max-width: 768px) {
@@ -1441,16 +1437,22 @@ body {
 }
 
 .status-indicator i {
-  font-size: 12px;
+  font-size: 24px; /* 2x bigger: 12px -> 24px */
+  transition: all var(--animation-duration-normal) var(--animation-easing-standard);
 }
 
-.status-text {
-  font-weight: 500;
-  white-space: nowrap;
-  flex-shrink: 0;
-  margin-left: 2px;
+/* Rescan icon specific styling */
+#rescan-status i {
+  color: var(--color-text-disabled); /* Gray when idle */
 }
 
+#rescan-status.running i {
+  color: #22c55e; /* Green when running */
+  animation: iconPulse 2s infinite;
+}
+
+/* Status text removed - using tooltips only */
+
 .status-dot {
   width: 8px;
   height: 8px;
@@ -1472,7 +1474,6 @@ body {
 }
 
 @keyframes pulse {
-
   0%,
   100% {
     opacity: 1;
@@ -1485,6 +1486,19 @@ body {
   }
 }
 
+@keyframes iconPulse {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1) rotate(0deg);
+  }
+
+  50% {
+    opacity: 0.7;
+    transform: scale(1.1) rotate(180deg);
+  }
+}
+
 /* Process status in mobile view */
 @media (max-width: 768px) {
   .process-status {
@@ -1499,12 +1513,8 @@ body {
     gap: 4px;
   }
 
-  .status-text {
-    display: none;
-  }
-
   .status-indicator i {
-    font-size: 14px;
+    font-size: 20px; /* Maintain 2x scale for mobile: was 14px -> 20px */
   }
 }
 

src/server/web/static/js/app.js

@@ -896,30 +896,45 @@ class AniWorldApp {
         const statusDot = statusElement.querySelector('.status-dot');
         if (!statusDot) return;
 
-        // Remove all status classes
+        // Remove all status classes from both dot and element
         statusDot.classList.remove('idle', 'running', 'error');
+        statusElement.classList.remove('running', 'error', 'idle');
+
+        // Capitalize process name for display
+        const displayName = processName.charAt(0).toUpperCase() + processName.slice(1);
 
         if (hasError) {
             statusDot.classList.add('error');
-            statusElement.title = `${processName} error - click for details`;
+            statusElement.classList.add('error');
+            statusElement.title = `${displayName} error - click for details`;
         } else if (isRunning) {
             statusDot.classList.add('running');
-            statusElement.title = `${processName} is running...`;
+            statusElement.classList.add('running');
+            statusElement.title = `${displayName} is running...`;
         } else {
             statusDot.classList.add('idle');
-            statusElement.title = `${processName} is idle`;
+            statusElement.classList.add('idle');
+            statusElement.title = `${displayName} is idle`;
         }
     }
 
     async checkProcessLocks() {
         try {
             const response = await this.makeAuthenticatedRequest('/api/process/locks/status');
-            if (!response) return;
+            if (!response) {
+                // If no response, set status as idle
+                this.updateProcessStatus('rescan', false);
+                this.updateProcessStatus('download', false);
+                return;
+            }
 
             // Check if response is actually JSON and not HTML (login page)
             const contentType = response.headers.get('content-type');
             if (!contentType || !contentType.includes('application/json')) {
                 console.warn('Process locks API returned non-JSON response, likely authentication issue');
+                // Set status as idle if we can't get proper response
+                this.updateProcessStatus('rescan', false);
+                this.updateProcessStatus('download', false);
                 return;
             }
 
@@ -935,25 +950,40 @@ class AniWorldApp {
                 if (rescanBtn) {
                     if (locks.rescan?.is_locked) {
                         rescanBtn.disabled = true;
-                        rescanBtn.querySelector('span').textContent = 'Scanning...';
+                        const span = rescanBtn.querySelector('span');
+                        if (span) span.textContent = 'Scanning...';
                     } else {
                         rescanBtn.disabled = false;
-                        rescanBtn.querySelector('span').textContent = 'Rescan';
+                        const span = rescanBtn.querySelector('span');
+                        if (span) span.textContent = 'Rescan';
                     }
                 }
+            } else {
+                // If API returns error, set status as idle
+                console.warn('Process locks API returned error:', data.error);
+                this.updateProcessStatus('rescan', false);
+                this.updateProcessStatus('download', false);
             }
         } catch (error) {
             console.error('Error checking process locks:', error);
+            // On error, set status as idle
+            this.updateProcessStatus('rescan', false);
+            this.updateProcessStatus('download', false);
         }
     }
 
     startProcessStatusMonitoring() {
+        // Initial check on page load
+        this.checkProcessLocks();
+
         // Check process status every 5 seconds
         setInterval(() => {
             if (this.isConnected) {
                 this.checkProcessLocks();
             }
         }, 5000);
+
+        console.log('Process status monitoring started');
     }
 
     async showConfigModal() {