From 664c7e2b1915cc49dba5bdd2c75b62b7fba6dbb9 Mon Sep 17 00:00:00 2001
From: Julian Meyer <julian.meyer@coinbase.com>
Date: Mon, 8 Jun 2026 09:09:15 -0700
Subject: [PATCH] feat: show navbar immediately while metadata.json loads

- Add animated skeleton placeholder in the Navbar dropdown slot while
  useTestMetadata() is fetching, so layout doesn't shift on load
- RunIndex: render Navbar + content skeleton during isLoadingBenchmarkRuns
  instead of a bare <div>Loading...</div> that hid the navbar entirely
- RunComparison: same fix
---
 report/src/components/Navbar.tsx   |  3 +++
 report/src/pages/RunComparison.tsx | 12 ++++++++++--
 report/src/pages/RunIndex.tsx      | 12 ++++++++++--
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/report/src/components/Navbar.tsx b/report/src/components/Navbar.tsx
index 927b83e2..17db3e25 100644
--- a/report/src/components/Navbar.tsx
+++ b/report/src/components/Navbar.tsx
@@ -140,6 +140,9 @@ const Navbar = ({ urlPrefix }: ProvidedProps) => {
           </Link>
         </div>
       </div>
+      {!isLoadTestsRoute && isLoading && (
+        <div className="animate-pulse bg-slate-200 rounded-md h-8 w-48" />
+      )}
       {!isLoadTestsRoute && !isLoading && !!allBenchmarkRuns?.runs.length && (
         <div>
           <Select
diff --git a/report/src/pages/RunComparison.tsx b/report/src/pages/RunComparison.tsx
index 03b853d2..759bcc0b 100644
--- a/report/src/pages/RunComparison.tsx
+++ b/report/src/pages/RunComparison.tsx
@@ -72,8 +72,16 @@ function RunComparison() {
     });
   }, [dataPerFile, selection.data]);
 
-  if (!benchmarkRuns || isLoadingBenchmarkRuns) {
-    return <div>Loading...</div>;
+  if (isLoadingBenchmarkRuns) {
+    return (
+      <div className="flex flex-col w-full min-h-screen">
+        <Navbar urlPrefix="/run-comparison" />
+        <div className="flex flex-col w-full flex-grow p-8 gap-4">
+          <div className="animate-pulse bg-slate-200 rounded h-6 w-48" />
+          <div className="animate-pulse bg-slate-100 rounded h-64 w-full" />
+        </div>
+      </div>
+    );
   }
 
   return (
diff --git a/report/src/pages/RunIndex.tsx b/report/src/pages/RunIndex.tsx
index f20d03e8..bbcefa14 100644
--- a/report/src/pages/RunIndex.tsx
+++ b/report/src/pages/RunIndex.tsx
@@ -177,8 +177,16 @@ const RunIndex = () => {
     };
   }, [allBenchmarkRuns, benchmarkRunId]);
 
-  if (!benchmarkRuns || isLoadingBenchmarkRuns) {
-    return <div>Loading...</div>;
+  if (isLoadingBenchmarkRuns) {
+    return (
+      <div className="flex flex-col w-full min-h-screen">
+        <Navbar />
+        <div className="flex flex-col w-full flex-grow p-8 gap-4">
+          <div className="animate-pulse bg-slate-200 rounded h-6 w-48" />
+          <div className="animate-pulse bg-slate-100 rounded h-64 w-full" />
+        </div>
+      </div>
+    );
   }
 
   return <RunIndexInner benchmarkRuns={benchmarkRuns} />;