fix: move creation loading indicator to create session form

Move the loading overlay from the active sessions section to the create
session section so it dims the form itself during creation, providing
better visual feedback to the user.
This commit is contained in:
Fusion
2026-05-23 08:08:24 +02:00
parent 8c5e1b931e
commit 18646e3d1b
2 changed files with 16 additions and 18 deletions
+10 -18
View File
@@ -388,23 +388,7 @@ export const SessionsPage = () => {
)} )}
{/* Active Sessions */} {/* Active Sessions */}
<div className={`active-sessions-section ${createStatus === "creating" || loadingSessionId ? "dimmed" : ""}`}> <div className="active-sessions-section">
{createStatus === "creating" && (
<div className="loading-overlay">
<div className="loading-content">
<Icon name="loading" size="lg" />
<p>{createProgress || "Creating session..."}</p>
</div>
</div>
)}
{loadingSessionId && (
<div className="loading-overlay">
<div className="loading-content">
<Icon name="loading" size="lg" />
<p>{loadingAction || "Processing..."}</p>
</div>
</div>
)}
<h2> <h2>
Active Sessions Active Sessions
{activeSessions.length > 0 && ( {activeSessions.length > 0 && (
@@ -638,7 +622,15 @@ export const SessionsPage = () => {
)} )}
{/* Create Session */} {/* Create Session */}
<div className="create-session-section"> <div className={`create-session-section ${createStatus === "creating" ? "dimmed" : ""}`}>
{createStatus === "creating" && (
<div className="loading-overlay">
<div className="loading-content">
<Icon name="loading" size="lg" />
<p>{createProgress || "Creating session..."}</p>
</div>
</div>
)}
<h2>Create New Session</h2> <h2>Create New Session</h2>
<form onSubmit={handleCreate} className="card stack create-session-form"> <form onSubmit={handleCreate} className="card stack create-session-form">
<div className="form-row"> <div className="form-row">
+6
View File
@@ -2825,9 +2825,15 @@ a.nav-item,
} }
.create-session-section { .create-session-section {
position: relative;
margin-bottom: var(--space-6); margin-bottom: var(--space-6);
} }
.create-session-section.dimmed {
opacity: 0.5;
pointer-events: none;
}
.create-session-form { .create-session-form {
max-width: 600px; max-width: 600px;
} }