feat: improve loading feedback UX with enhanced spinner, progress bar and contextual messages

app/static/index.html

@@ -877,6 +877,58 @@
             padding: 20px;
         }
         
+        /* Improved loading feedback */
+        .loading-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 40px 20px;
+            text-align: center;
+        }
+        
+        .loading-spinner-enhanced {
+            width: 40px;
+            height: 40px;
+            border: 3px solid var(--pf-global--BorderColor--200);
+            border-top: 3px solid var(--pf-global--primary-color--100);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin-bottom: 16px;
+        }
+        
+        .loading-text {
+            color: var(--pf-global--Color--200);
+            font-size: 16px;
+            margin-bottom: 8px;
+        }
+        
+        .loading-subtext {
+            color: var(--pf-global--Color--300);
+            font-size: 14px;
+        }
+        
+        .loading-progress {
+            width: 200px;
+            height: 4px;
+            background-color: var(--pf-global--BackgroundColor--300);
+            border-radius: 2px;
+            margin-top: 12px;
+            overflow: hidden;
+        }
+        
+        .loading-progress-bar {
+            height: 100%;
+            background: linear-gradient(90deg, var(--pf-global--primary-color--100), var(--pf-global--info-color--100));
+            border-radius: 2px;
+            transition: width 0.3s ease;
+            animation: pulse 2s ease-in-out infinite;
+        }
+        
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.7; }
+        }
+        
         .workload-issues-list {
             display: flex;
             flex-direction: column;
@@ -2328,16 +2380,48 @@
                 return;
             }
             
-            // If data not available, show loading
+            // If data not available, show enhanced loading with progress
+            showEnhancedLoading(container, namespace);
+        }
+        
+        function showEnhancedLoading(container, namespace) {
+            const totalPods = namespace.pods ? namespace.pods.size : 0;
+            const totalIssues = namespace.validations ? namespace.validations.length : 0;
+            
             container.innerHTML = `
-                <div class="loading-spinner">
-                    <div class="spinner"></div>
-                    Loading issues...
+                <div class="loading-container">
+                    <div class="loading-spinner-enhanced"></div>
+                    <div class="loading-text">Loading workload issues...</div>
+                    <div class="loading-subtext">Analyzing ${namespace.namespace} namespace (${totalPods} pods, ${totalIssues} issues)</div>
+                    <div class="loading-progress">
+                        <div class="loading-progress-bar" style="width: 60%"></div>
+                    </div>
                 </div>
             `;
+            
+            // Simulate progress update
+            let progress = 60;
+            const progressInterval = setInterval(() => {
+                progress += Math.random() * 10;
+                if (progress > 90) progress = 90;
+                
+                const progressBar = container.querySelector('.loading-progress-bar');
+                if (progressBar) {
+                    progressBar.style.width = `${progress}%`;
+                }
+            }, 500);
+            
+            // Store interval for cleanup
+            container._progressInterval = progressInterval;
         }
         
         function displayWorkloadIssues(container, data, namespace) {
+            // Clean up progress interval if exists
+            if (container._progressInterval) {
+                clearInterval(container._progressInterval);
+                container._progressInterval = null;
+            }
+            
             if (!data.validations || data.validations.length === 0) {
                 container.innerHTML = `
                     <div style="text-align: center; padding: 20px; color: var(--pf-global--Color--300);">