From 18646e3d1bd4ee0c45f1a393d700c3b1a95c85c7 Mon Sep 17 00:00:00 2001
From: Fusion <noreply@runfusion.ai>
Date: Sat, 23 May 2026 08:08:24 +0200
Subject: [PATCH] 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.
---
 apps/web/src/pages/sessions.tsx | 28 ++++++++++------------------
 apps/web/src/styles.css         |  6 ++++++
 2 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/apps/web/src/pages/sessions.tsx b/apps/web/src/pages/sessions.tsx
index d7f94f7..d4723bd 100644
--- a/apps/web/src/pages/sessions.tsx
+++ b/apps/web/src/pages/sessions.tsx
@@ -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">
diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index 9f93cb0..57157b0 100644
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -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;
 }