From e0d8ecddd92047993223a81795245d840fda3e41 Mon Sep 17 00:00:00 2001
From: iamtoruk <hello@agentseal.org>
Date: Sun, 19 Apr 2026 06:45:47 -0700
Subject: [PATCH] fix(compare): show compare-styled loading screen during
 period switch

---
 src/dashboard.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/dashboard.tsx b/src/dashboard.tsx
index a0dcb32..1849e94 100644
--- a/src/dashboard.tsx
+++ b/src/dashboard.tsx
@@ -702,9 +702,17 @@ function InteractiveDashboard({ initialProjects, initialPeriod, initialProvider,
   if (loading) {
     return (
       <Box flexDirection="column" width={dashWidth}>
-        <PeriodTabs active={period} providerName={activeProvider} showProvider={multipleProviders} />
-        <Panel title="CodeBurn" color={ORANGE} width={dashWidth}><Text dimColor>Loading {PERIOD_LABELS[period]}...</Text></Panel>
-        <StatusBar width={dashWidth} showProvider={multipleProviders} view="dashboard" findingCount={0} optimizeAvailable={false} compareAvailable={false} />
+        <PeriodTabs active={period} providerName={activeProvider} showProvider={view !== 'compare' && multipleProviders} />
+        {view === 'compare'
+          ? <Box flexDirection="column" paddingX={2} paddingY={1}>
+              <Box flexDirection="column" borderStyle="round" borderColor={ORANGE} paddingX={1}>
+                <Text bold color={ORANGE}>Model Comparison</Text>
+                <Text> </Text>
+                <Text dimColor>Loading {PERIOD_LABELS[period]} model data...</Text>
+              </Box>
+            </Box>
+          : <Panel title="CodeBurn" color={ORANGE} width={dashWidth}><Text dimColor>Loading {PERIOD_LABELS[period]}...</Text></Panel>}
+        {view !== 'compare' && <StatusBar width={dashWidth} showProvider={multipleProviders} view="dashboard" findingCount={0} optimizeAvailable={false} compareAvailable={false} />}
       </Box>
     )
   }