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