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:
@@ -388,23 +388,7 @@ export const SessionsPage = () => {
|
||||
)}
|
||||
|
||||
{/* Active Sessions */}
|
||||
<div className={`active-sessions-section ${createStatus === "creating" || loadingSessionId ? "dimmed" : ""}`}>
|
||||
{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>
|
||||
)}
|
||||
<div className="active-sessions-section">
|
||||
<h2>
|
||||
Active Sessions
|
||||
{activeSessions.length > 0 && (
|
||||
@@ -638,7 +622,15 @@ export const SessionsPage = () => {
|
||||
)}
|
||||
|
||||
{/* 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>
|
||||
<form onSubmit={handleCreate} className="card stack create-session-form">
|
||||
<div className="form-row">
|
||||
|
||||
@@ -2825,9 +2825,15 @@ a.nav-item,
|
||||
}
|
||||
|
||||
.create-session-section {
|
||||
position: relative;
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
|
||||
.create-session-section.dimmed {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.create-session-form {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user