From ff4a2810a552aef4384c6db9ba99f889fdee4aae Mon Sep 17 00:00:00 2001
From: Gandalf the Greybeard <gandalf@privilegedescalation.dev>
Date: Wed, 25 Mar 2026 06:18:45 +0000
Subject: [PATCH] fix: render heading immediately in MetricsPage, before
 ctxLoading resolves
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The heading 'Intel GPU — Metrics' was blocked behind the ctxLoading check,
causing the E2E navigation test to timeout when navigating directly to
/c/main/intel-gpu/metrics. The K8s.ResourceClasses.useList() hooks
in IntelGpuDataContext can take time to resolve when navigating directly
to the metrics route (as opposed to via sidebar), causing ctxLoading to
remain true beyond the 15s test timeout.

Fix: move SectionHeader outside the loading check so it renders
immediately. The Loader now appears below the heading while waiting
for context to load. Also disable the Refresh button during ctxLoading.

Updated unit test to verify heading is visible even when ctxLoading=true.

Fixes: headlamp-intel-gpu-plugin#42

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 src/components/MetricsPage.test.tsx |  4 +++-
 src/components/MetricsPage.tsx      | 11 +++++------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/MetricsPage.test.tsx b/src/components/MetricsPage.test.tsx
index b92cae8..f775303 100644
--- a/src/components/MetricsPage.test.tsx
+++ b/src/components/MetricsPage.test.tsx
@@ -106,11 +106,13 @@ describe('MetricsPage', () => {
     vi.clearAllMocks();
   });
 
-  it('shows loader when ctxLoading=true', () => {
+  it('shows loader when ctxLoading=true but heading is visible immediately', () => {
     vi.mocked(useIntelGpuContext).mockReturnValue(makeContext({ loading: true }));
     // fetchGpuMetrics should never be called in loading state
     vi.mocked(fetchGpuMetrics).mockResolvedValue(null);
     render(<MetricsPage />);
+    // Heading renders immediately, loader appears below it while waiting for context
+    expect(screen.getByText('Intel GPU — Metrics')).toBeInTheDocument();
     expect(screen.getByTestId('loader')).toHaveTextContent('Loading Intel GPU data...');
   });
 
diff --git a/src/components/MetricsPage.tsx b/src/components/MetricsPage.tsx
index 1493590..607bd45 100644
--- a/src/components/MetricsPage.tsx
+++ b/src/components/MetricsPage.tsx
@@ -230,10 +230,6 @@ export default function MetricsPage() {
     };
   }, [ctxLoading, fetchSeq]);
 
-  if (ctxLoading) {
-    return <Loader title="Loading Intel GPU data..." />;
-  }
-
   return (
     <>
       <div
@@ -247,7 +243,7 @@ export default function MetricsPage() {
         <SectionHeader title="Intel GPU — Metrics" />
         <button
           onClick={() => void doFetch()}
-          disabled={fetching}
+          disabled={fetching || ctxLoading}
           aria-label="Refresh metrics"
           style={{
             padding: '6px 16px',
@@ -255,15 +251,18 @@ export default function MetricsPage() {
             color: 'var(--mui-palette-primary-main, #0071c5)',
             border: '1px solid var(--mui-palette-primary-main, #0071c5)',
             borderRadius: '4px',
-            cursor: 'pointer',
+            cursor: fetching || ctxLoading ? 'not-allowed' : 'pointer',
             fontSize: '13px',
             fontWeight: 500,
+            opacity: fetching || ctxLoading ? 0.6 : 1,
           }}
         >
           {fetching ? 'Refreshing…' : 'Refresh'}
         </button>
       </div>
 
+      {ctxLoading && <Loader title="Loading Intel GPU data..." />}
+
       <MetricRequirements />
 
       {fetching && !metrics && <Loader title="Querying Prometheus for GPU metrics..." />}
-- 
2.52.0