From 76bc80ca67bb26c7c4ce493e8f2fef8830918ab6 Mon Sep 17 00:00:00 2001
From: iamtoruk <hello@agentseal.org>
Date: Thu, 16 Jul 2026 05:04:50 -0700
Subject: [PATCH] polish(app): skeleton loaders for Compare and the Audit lens

The motion batch gave five sections shimmer skeletons on first load but
missed Compare and Models' Audit lens (both still showed bare loading
text in an empty panel). Same SectionSkeleton treatment now.

250/250.
---
 app/renderer/sections/Compare.tsx | 13 +++----------
 app/renderer/sections/Models.tsx  |  6 +-----
 2 files changed, 4 insertions(+), 15 deletions(-)

diff --git a/app/renderer/sections/Compare.tsx b/app/renderer/sections/Compare.tsx
index 9cf23b8..fa0b5b0 100644
--- a/app/renderer/sections/Compare.tsx
+++ b/app/renderer/sections/Compare.tsx
@@ -4,6 +4,7 @@ import { CliErrorPanel } from '../components/CliErrorPanel'
 import { Dropdown } from '../components/Dropdown'
 import { EmptyNote } from '../components/EmptyState'
 import { Panel } from '../components/Panel'
+import { SectionSkeleton } from '../components/Skeleton'
 import { usePolled } from '../hooks/usePolled'
 import { formatCompact, formatUsd } from '../lib/format'
 import { codeburn } from '../lib/ipc'
@@ -60,11 +61,7 @@ export function Compare({
 
   if (!models.data) {
     if (models.error) return <CliErrorPanel error={models.error} subject="model comparisons" />
-    return (
-      <Panel title="Compare">
-        <EmptyNote>Scanning model usage…</EmptyNote>
-      </Panel>
-    )
+    return <SectionSkeleton label="Scanning model usage…" rows={4} />
   }
 
   if (models.data.length < 2) {
@@ -144,11 +141,7 @@ function CompareReport({
 
   if (!report.data) {
     if (report.error) return <CliErrorPanel error={report.error} subject="model comparisons" />
-    return (
-      <Panel title="Compare">
-        <EmptyNote>Comparing models…</EmptyNote>
-      </Panel>
-    )
+    return <SectionSkeleton label="Comparing models…" rows={4} />
   }
 
   const performance = report.data.metrics.filter(metric => metric.section === 'Performance')
diff --git a/app/renderer/sections/Models.tsx b/app/renderer/sections/Models.tsx
index 280dfe8..f2483a7 100644
--- a/app/renderer/sections/Models.tsx
+++ b/app/renderer/sections/Models.tsx
@@ -133,11 +133,7 @@ function AuditLens({
 
   if (!report.data) {
     if (report.error) return <CliErrorPanel error={report.error} subject="the token audit" />
-    return (
-      <Panel title="Audit">
-        <EmptyNote>Auditing token usage…</EmptyNote>
-      </Panel>
-    )
+    return <SectionSkeleton label="Auditing token usage…" rows={5} />
   }
 
   return (