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:
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user