feat: busy container overlays for lifecycle actions

Add a reusable LoadingOverlay component that dims and disables the
container owning an in-flight action, with a spinning indicator and
label. Apply it to:

- SessionCard (when actionBusyId matches)
- InstanceList cards (per busyInstanceId with action-specific labels)
- CreateSessionForm (while submitting)
- ToolStarter (while starting)

Also add .icon-spin animation and position:relative to the relevant
containers.

Quality gates: npm run typecheck, npm run lint, npm test -- --run
(87 passed).
This commit is contained in:
Developer
2026-06-13 10:10:28 +00:00
parent 8a8a9bc9e4
commit f8b162ec5f
6 changed files with 84 additions and 0 deletions
@@ -0,0 +1,21 @@
import { Icon } from "./icon";
interface LoadingOverlayProps {
visible: boolean;
label?: string;
}
export function LoadingOverlay({ visible, label }: LoadingOverlayProps) {
if (!visible) return null;
return (
<div className="loading-overlay" aria-live="polite">
<div className="loading-overlay-content">
<Icon name="loading" size="lg" className="icon-spin" ariaLabel={label} />
{label && (
<span className="loading-overlay-label">{label}</span>
)}
</div>
</div>
);
}