Implement fullscreen loading modal with blur background

app/static/index.html

@@ -1745,22 +1745,78 @@
         }
 
         // Loading Functions
-        function showLoadingOverlay(containerId, message = 'Loading...') {
+        function showFullscreenLoading(message = 'Analyzing Cluster Resources', submessage = 'Please wait while we analyze your cluster resources...') {
-            const container = document.getElementById(containerId);
+            // Create fullscreen loading modal
-            if (!container) return;
+            const loadingModal = document.createElement('div');
+            loadingModal.id = 'fullscreen-loading';
+            loadingModal.style.cssText = `
+                position: fixed;
+                top: 0;
+                left: 0;
+                width: 100vw;
+                height: 100vh;
+                background: rgba(21, 21, 21, 0.95);
+                backdrop-filter: blur(10px);
+                z-index: 9999;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                color: var(--pf-global--Color--100);
+                font-family: var(--pf-global--FontFamily--sans-serif);
+            `;
             
-            const loadingHTML = `
+            loadingModal.innerHTML = `
-                <div class="pf-c-empty-state" style="padding: 2rem;">
+                <div style="text-align: center; max-width: 600px; padding: 2rem;">
-                    <div class="pf-c-empty-state__icon">
+                    <div style="margin-bottom: 2rem;">
-                        <i class="fas fa-spinner fa-spin" style="font-size: 3rem; color: var(--pf-global--primary-color--100);"></i>
+                        <i class="fas fa-spinner fa-spin" style="font-size: 4rem; color: var(--pf-global--primary-color--100);"></i>
                     </div>
-                    <h1 class="pf-c-title pf-m-lg">${message}</h1>
+                    <h1 style="font-size: 2.5rem; margin: 0 0 1rem 0; color: var(--pf-global--Color--100); font-weight: 600;">
-                    <div class="pf-c-empty-state__body">
+                        ${message}
-                        <p>Please wait while we analyze your cluster resources...</p>
+                    </h1>
+                    <p style="font-size: 1.2rem; margin: 0 0 2rem 0; color: var(--pf-global--Color--300);">
+                        ${submessage}
+                    </p>
+                    <div style="background: var(--pf-global--BackgroundColor--300); border-radius: 8px; padding: 1rem; margin: 1rem 0;">
+                        <div style="display: flex; align-items: center; justify-content: center; margin-bottom: 0.5rem;">
+                            <i class="fas fa-server" style="margin-right: 0.5rem; color: var(--pf-global--primary-color--100);"></i>
+                            <span>Connecting to OpenShift API...</span>
+                        </div>
+                        <div style="display: flex; align-items: center; justify-content: center; margin-bottom: 0.5rem;">
+                            <i class="fas fa-chart-line" style="margin-right: 0.5rem; color: var(--pf-global--primary-color--100);"></i>
+                            <span>Querying Prometheus metrics...</span>
+                        </div>
+                        <div style="display: flex; align-items: center; justify-content: center;">
+                            <i class="fas fa-cogs" style="margin-right: 0.5rem; color: var(--pf-global--primary-color--100);"></i>
+                            <span>Analyzing resource usage patterns...</span>
+                        </div>
+                    </div>
+                    <div style="margin-top: 2rem;">
+                        <div style="width: 300px; height: 4px; background: var(--pf-global--BackgroundColor--300); border-radius: 2px; overflow: hidden;">
+                            <div id="loading-progress" style="width: 0%; height: 100%; background: linear-gradient(90deg, var(--pf-global--primary-color--100), var(--pf-global--info-color--100)); transition: width 0.3s ease;"></div>
+                        </div>
                     </div>
                 </div>
             `;
-            container.innerHTML = loadingHTML;
+            
+            document.body.appendChild(loadingModal);
+            
+            // Animate progress bar
+            let progress = 0;
+            const progressInterval = setInterval(() => {
+                progress += Math.random() * 15;
+                if (progress > 90) progress = 90;
+                document.getElementById('loading-progress').style.width = progress + '%';
+            }, 200);
+            
+            return { modal: loadingModal, progressInterval };
+        }
+
+        function hideFullscreenLoading() {
+            const loadingModal = document.getElementById('fullscreen-loading');
+            if (loadingModal) {
+                loadingModal.remove();
+            }
         }
 
         function showChartLoading(containerId, message = 'Loading chart...') {
@@ -1787,6 +1843,10 @@
 
         function updateLoadingProgress(loaded, total) {
             const progress = Math.round((loaded / total) * 100);
+            const progressBar = document.getElementById('loading-progress');
+            if (progressBar) {
+                progressBar.style.width = progress + '%';
+            }
             console.log(`Loading progress: ${progress}% (${loaded}/${total})`);
         }
         
@@ -1857,24 +1917,43 @@
         }
         
         async function loadWorkloadScanner() {
+            let loadingModal = null;
             try {
-                // Show loading overlay for metrics
+                // Show fullscreen loading modal
-                showLoadingOverlay('metrics-grid', 'Analyzing Cluster Resources');
+                loadingModal = showFullscreenLoading(
+                    'Analyzing Cluster Resources',
+                    'Please wait while we analyze your cluster resources and generate insights...'
+                );
                 
                 // Load cluster status
                 const clusterResponse = await fetch('/api/v1/cluster/status');
                 const clusterData = await clusterResponse.json();
                 
+                // Update progress
+                updateLoadingProgress(1, 3);
+                
                 // Update metrics cards
                 updateMetricsCards(clusterData);
                 
+                // Update progress
+                updateLoadingProgress(2, 3);
+                
                 // Load dashboard charts with loading states
                 await loadDashboardCharts();
                 
+                // Update progress
+                updateLoadingProgress(3, 3);
+                
                 currentData = { cluster: clusterData };
                 
+                // Hide loading modal after a short delay
+                setTimeout(() => {
+                    hideFullscreenLoading();
+                }, 500);
+                
             } catch (error) {
                 console.error('Error loading workload scanner data:', error);
+                hideFullscreenLoading();
                 showError('metrics-grid', 'Failed to load cluster data');
             }
         }
@@ -2020,13 +2099,6 @@
         // Dashboard Charts Functions
         async function loadDashboardCharts() {
             try {
-                // Show loading for all charts
-                showChartLoading('resource-utilization-chart', 'Loading Resource Trends...');
-                showChartLoading('namespace-distribution-chart', 'Analyzing Namespace Distribution...');
-                showChartLoading('issues-timeline-chart', 'Loading Issues Timeline...');
-                showChartLoading('top-workloads-chart', 'Identifying Top Workloads...');
-                showChartLoading('overcommit-chart', 'Calculating Overcommit Status...');
-                
                 // Load all charts in parallel
                 await Promise.all([
                     loadResourceUtilizationTrend(),