Only load benchmark names when needed

Author: pablogsal

frontend/src/app/build-comparison/page.tsx

@@ -82,6 +82,7 @@ export default function BuildComparisonPage() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [dataProcessing, setDataProcessing] = useState(false);
+  const [benchmarkNamesLoading, setBenchmarkNamesLoading] = useState(false);
 
   // Store trend data for each binary-benchmark combination
   const [trendData, setTrendData] = useState<
@@ -177,10 +178,8 @@ export default function BuildComparisonPage() {
     async function loadBenchmarkData() {
       if (
         !selectedEnvironmentId ||
-        !selectedPythonVersionKey ||
-        selectedBinaries.length === 0
+        !selectedPythonVersionKey
       ) {
-        setDataProcessing(false);
         return;
       }
 
@@ -193,12 +192,17 @@ export default function BuildComparisonPage() {
       }
 
       try {
-        setDataProcessing(true);
+        setBenchmarkNamesLoading(true);
 
-        // Get available benchmark names for the first binary
+        // Get available benchmark names for the first available binary (benchmark names are the same across binaries)
+        const firstBinaryId = binaries.length > 0 ? binaries[0].id : undefined;
+        if (!firstBinaryId) {
+          return;
+        }
+        
         const uniqueBenchmarks = await api.getBenchmarkNames({
           environment_id: selectedEnvironmentId,
-          binary_id: selectedBinaries[0],
+          binary_id: firstBinaryId,
           python_major: versionOption.major,
           python_minor: versionOption.minor,
         } satisfies BenchmarkNamesQueryParams);
@@ -217,7 +221,7 @@ export default function BuildComparisonPage() {
           variant: 'destructive',
         });
       } finally {
-        setDataProcessing(false);
+        setBenchmarkNamesLoading(false);
       }
     }
 
@@ -227,10 +231,10 @@ export default function BuildComparisonPage() {
   }, [
     selectedEnvironmentId,
     selectedPythonVersionKey,
-    selectedBinaries,
     pythonVersionOptions,
     loading,
     mounted,
+    binaries,
   ]);
 
   // Load ALL benchmark data upfront for selected binaries and environment
@@ -1067,12 +1071,7 @@ export default function BuildComparisonPage() {
                   }
                 />
                 <ScrollArea className="h-48 rounded-md border p-4">
-                  {loading ||
-                  dataProcessing ||
-                  (allBenchmarkNames.length === 0 &&
-                    selectedEnvironmentId &&
-                    selectedPythonVersionKey &&
-                    selectedBinaries.length > 0) ? (
+                  {benchmarkNamesLoading ? (
                     <div className="space-y-2">
                       {[...Array(8)].map((_, i) => (
                         <div key={i} className="flex items-center space-x-2">

frontend/src/app/trends/page.tsx

@@ -82,6 +82,7 @@ export default function BenchmarkTrendPage() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [dataProcessing, setDataProcessing] = useState(false);
+  const [benchmarkNamesLoading, setBenchmarkNamesLoading] = useState(false);
 
   const [selectedBinaryId, setSelectedBinaryId] = useState<
     string | undefined
@@ -232,7 +233,7 @@ export default function BenchmarkTrendPage() {
       }
 
       try {
-        setDataProcessing(true);
+        setBenchmarkNamesLoading(true);
         const uniqueBenchmarks = await api.getBenchmarkNames({
           environment_id: selectedEnvironmentId,
           binary_id: selectedBinaryId,
@@ -254,11 +255,11 @@ export default function BenchmarkTrendPage() {
           variant: 'destructive',
         });
       } finally {
-        setDataProcessing(false);
+        setBenchmarkNamesLoading(false);
       }
     }
 
-    if (!loading && mounted && availableEnvironments.length > 0) {
+    if (!loading && mounted) {
       loadBenchmarkData();
     }
   }, [
@@ -268,7 +269,6 @@ export default function BenchmarkTrendPage() {
     pythonVersionOptions,
     loading,
     mounted,
-    availableEnvironments,
   ]);
 
   // Load trend data when benchmarks are selected
@@ -826,7 +826,7 @@ export default function BenchmarkTrendPage() {
               disabled={loading || allBenchmarkNames.length === 0}
             />
             <ScrollArea className="h-40 rounded-md border p-2">
-              {loading || dataProcessing ? (
+              {benchmarkNamesLoading ? (
                 <div className="space-y-2">
                   {[...Array(6)].map((_, i) => (
                     <div key={i} className="flex items-center space-x-2">