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
@@ -1,5 +1,6 @@
import { useState, useEffect } from "react";
import { Icon } from "../../icon";
import { LoadingOverlay } from "../../loading-overlay";
import {
createInstance,
startInstance,
@@ -215,6 +216,7 @@ export const CreateSessionForm = ({
return (
<div className={`create-session-form-wrapper ${className}`}>
<LoadingOverlay visible={isSubmitting} label="Creating session..." />
<form onSubmit={handleSubmit} className="stack create-session-form">
{/* Project */}
<div className="form-field">
@@ -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">