diff --git a/app/static/index.html b/app/static/index.html index 27b9db9..7af6f28 100644 --- a/app/static/index.html +++ b/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 = ` -