From cd1db491b2defd3a4f7834286d2bf0c3cd2b94fe Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 9 Jun 2026 16:00:03 -0700
Subject: [PATCH] [eric] frontend: bring back the empty-state shimmer as a
 transform-only sheen, composited instead of repainting 60fps

---
 .../Dashboard/canvas/DashboardEmptyState.tsx   | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardEmptyState.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardEmptyState.tsx
index ed2bb315..36d9df09 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardEmptyState.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardEmptyState.tsx
@@ -26,6 +26,8 @@ const DashboardEmptyState: React.FC<{ c: ClaudeTokens }> = ({ c }) => (
         alignItems: 'center',
         gap: 0.7,
         color: c.text.primary,
+        position: 'relative',
+        overflow: 'hidden',
       }}
     >
       Click the
@@ -33,6 +35,22 @@ const DashboardEmptyState: React.FC<{ c: ClaudeTokens }> = ({ c }) => (
         <ChatBubbleTeardrop sx={{ fontSize: 15 }} />
       </Box>
       below to launch your first agent
+      {/* Sheen sweeps via transform only: the layer rasters once and the GPU slides it, unlike the old background-position shimmer that repainted every frame. */}
+      <Box
+        component="span"
+        aria-hidden
+        sx={{
+          position: 'absolute',
+          inset: 0,
+          pointerEvents: 'none',
+          background: 'linear-gradient(105deg, transparent 42%, rgba(255,255,255,0.14) 50%, transparent 58%)',
+          transform: 'translateX(-100%)',
+          animation: 'empty-state-sheen 6s linear infinite',
+          willChange: 'transform',
+          '@keyframes empty-state-sheen': { to: { transform: 'translateX(100%)' } },
+          '@media (prefers-reduced-motion: reduce)': { animation: 'none' },
+        }}
+      />
     </Typography>
   </Box>
 );