From 0b745bc9937c00b4c898af39e1a1a4da744e161d Mon Sep 17 00:00:00 2001 From: Brooklyn Nicholson Date: Sun, 26 Jul 2026 01:10:22 -0500 Subject: [PATCH] perf(desktop): pause glyph spinners on hidden tabs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Each kept-alive tab whose model hasn't resolved ticks a GlyphSpinner — setInterval + setState + a React commit every ~80ms, per mounted tab, for pixels behind the active one. Gate the interval on the pane's visibility context; the visible tab keeps its spinner, hidden tabs resume from frame 0 on reveal. --- apps/desktop/src/components/ui/glyph-spinner.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/apps/desktop/src/components/ui/glyph-spinner.tsx b/apps/desktop/src/components/ui/glyph-spinner.tsx index bf42e587640a..52e82412c881 100644 --- a/apps/desktop/src/components/ui/glyph-spinner.tsx +++ b/apps/desktop/src/components/ui/glyph-spinner.tsx @@ -1,6 +1,7 @@ import { useEffect, useState } from 'react' import spinners, { type BrailleSpinnerName as SpinnerName } from 'unicode-animations' +import { usePaneVisible } from '@/components/pane-shell/pane-visibility' import { cn } from '@/lib/utils' export type { SpinnerName } @@ -43,13 +44,20 @@ interface GlyphSpinnerProps { export function GlyphSpinner({ ariaLabel = 'Loading', className, spinner = 'braille' }: GlyphSpinnerProps) { const spin = FRAMES_BY_NAME[spinner] ?? FRAMES_BY_NAME.braille! const [frame, setFrame] = useState(0) + // Pause when this surface is a hidden (kept-alive) tab: N mounted tabs each + // ticking a setInterval + setState burn CPU for pixels nobody can see. + const visible = usePaneVisible() useEffect(() => { + if (!visible) { + return + } + setFrame(0) const id = window.setInterval(() => setFrame(f => (f + 1) % spin.frames.length), spin.interval) return () => window.clearInterval(id) - }, [spin]) + }, [spin, visible]) return (