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:
@@ -3,6 +3,7 @@ import type { Session } from "../../../api/sessions";
|
||||
import { Icon } from "../../icon";
|
||||
import { useMobileViewport } from "../../../hooks/use-mobile-viewport";
|
||||
import { MobileActionSheet } from "../mobile/mobile-action-sheet";
|
||||
import { LoadingOverlay } from "../../loading-overlay";
|
||||
import type { IconName } from "../../icon";
|
||||
|
||||
export interface SessionCardProps {
|
||||
@@ -14,6 +15,7 @@ export interface SessionCardProps {
|
||||
onRecreateTunnel?: (session: Session) => void;
|
||||
onRename?: (session: Session, newName: string) => void;
|
||||
isBusy?: boolean;
|
||||
busyLabel?: string;
|
||||
tunnelHealth?: {
|
||||
healthy: boolean;
|
||||
container_status: string;
|
||||
@@ -46,6 +48,7 @@ export function SessionCard({
|
||||
onRecreateTunnel,
|
||||
onRename,
|
||||
isBusy = false,
|
||||
busyLabel = "Working...",
|
||||
tunnelHealth = null,
|
||||
}: SessionCardProps) {
|
||||
const [showActionSheet, setShowActionSheet] = useState(false);
|
||||
@@ -106,6 +109,7 @@ export function SessionCard({
|
||||
|
||||
return (
|
||||
<article className="card session-card">
|
||||
<LoadingOverlay visible={isBusy} label={busyLabel} />
|
||||
<div className="session-card-content">
|
||||
<div className="session-card-header">
|
||||
<div className="session-card-title">
|
||||
|
||||
Reference in New Issue
Block a user