From 8c5e1b931e819c52f4c9ef92b881790a660c5fd9 Mon Sep 17 00:00:00 2001
From: Fusion <noreply@runfusion.ai>
Date: Sat, 23 May 2026 08:04:48 +0200
Subject: [PATCH] fix: move creation loading indicator outside active sessions
 grid

The loading overlay for instance creation was inside the active sessions
grid, which doesn't render when there are no active sessions. Moved the
overlay to the parent container so it's always visible during creation
regardless of existing sessions.
---
 apps/web/src/pages/sessions.tsx | 36 ++++++++++++++++-----------------
 apps/web/src/styles.css         |  6 ++++++
 2 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/apps/web/src/pages/sessions.tsx b/apps/web/src/pages/sessions.tsx
index 9a4573b..d7f94f7 100644
--- a/apps/web/src/pages/sessions.tsx
+++ b/apps/web/src/pages/sessions.tsx
@@ -388,7 +388,23 @@ export const SessionsPage = () => {
           )}
 
           {/* Active Sessions */}
-          <div className="active-sessions-section">
+          <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>
+            )}
             <h2>
               Active Sessions
               {activeSessions.length > 0 && (
@@ -398,23 +414,7 @@ export const SessionsPage = () => {
             {activeSessions.length === 0 ? (
               <p className="muted">No active sessions</p>
             ) : (
-              <div className={`sessions-grid ${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="sessions-grid">
                 {activeSessions.map((session) => (
                   <div className="card session-card" key={session.id}>
                     <div className="session-info">
diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index 6131118..9f93cb0 100644
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -2652,9 +2652,15 @@ a.nav-item,
 }
 
 .active-sessions-section {
+  position: relative;
   margin-bottom: var(--space-6);
 }
 
+.active-sessions-section.dimmed {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
 .active-sessions-section h2 {
   display: flex;
   align-items: center;