diff --git a/ui-electrobun/src/mainview/StatusBar.svelte b/ui-electrobun/src/mainview/StatusBar.svelte index 2742d4c..00c1254 100644 --- a/ui-electrobun/src/mainview/StatusBar.svelte +++ b/ui-electrobun/src/mainview/StatusBar.svelte @@ -178,11 +178,13 @@ .dot.orange { background: var(--ctp-peach); } .pulse-dot { - /* No CSS animation — use JS class toggle to avoid continuous repaint. - CEF + WebKitGTK both suffer from high CPU with @keyframes on small elements. */ - transition: opacity 0.3s ease; + animation: pulse 1.5s ease-in-out infinite; + } + + @keyframes pulse { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.3; } } - .pulse-dot.dim { opacity: 0.4; } .val { color: var(--ctp-text); font-weight: 500; } .cost { color: var(--ctp-yellow); } diff --git a/ui-electrobun/src/mainview/app.css b/ui-electrobun/src/mainview/app.css index 8ce37c9..9e1048f 100644 --- a/ui-electrobun/src/mainview/app.css +++ b/ui-electrobun/src/mainview/app.css @@ -219,8 +219,10 @@ html, body { --dot-color: var(--ctp-peach); } -/* @keyframes pulse-dot removed — CSS animations cause continuous repaint - in CEF + WebKitGTK. Use JS class toggle instead. */ +@keyframes pulse-dot { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.55; transform: scale(0.85); } +} .project-name { font-weight: 600;