Bug: Spinner animations get stuck — animate-spin class undefined on pages without TaskCard

[timothyjlaurent]

Problem

Loading spinners across the dashboard appear "stuck" (frozen, not spinning) on pages that don't render a TaskCard component. This affects the initial loading screen (DashboardLoader), background task indicators, agent detail views, settings, and many other views.

Root Cause

The .animate-spin CSS utility class (used by 25+ components, ~60 instances) is defined only in TaskCard.css:

/* TaskCard.css:716 */
.animate-spin {
  animation: spin 1s linear infinite;
}

Since the project uses plain (non-modular) CSS with Vite, stylesheets are only loaded when their importing component renders. If no TaskCard is on the page, the .animate-spin class simply doesn't exist — browsers apply no animation and the spinner icon sits frozen.

Additionally, BackgroundTasksIndicator.tsx uses inline style={{ animation: "spin 1s linear infinite" }}, which references @keyframes spin without defining it in its own CSS file. This works only because other component CSS files happen to define it.

Fix

Add @keyframes spin and .animate-spin to the global styles.css so they're available from the very first paint, regardless of which components are rendered.

/* styles.css */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.animate-spin {
  animation: spin 1s linear infinite;
}

Affected Components (partial list)

• DashboardLoader — loading screen spinner
• BackgroundTasksIndicator — pill spinner + per-session spinners
• AgentDetailView — ~20 spinners throughout
• MemoryView — 9 spinners
• Header — refresh spinner
• SettingsModal, SetupWizardModal, ModelOnboardingModal
• ProjectCard, ProjectSelector, ProjectHealthBadge
• AgentLogViewer, AgentRunHistory, AgentReflectionsTab
• RuntimeCardShell, DirectoryPicker, ResearchView
• And more...