From e688fe0a6b354f0cca59a359661eb3ff602edfbe Mon Sep 17 00:00:00 2001
From: Louis Knight-Webb <louis@bloop.ai>
Date: Thu, 3 Jul 2025 22:32:51 +0100
Subject: [PATCH] The loading state issue is now fixed! The changes I made:
 (#64)

1. **Proper loading state**: Now only shows the spinner when `loading` is true (actually loading data)
2. **No attempt selected**: Shows "No attempt selected" when there's no selected attempt
3. **No execution started**: Shows "Task execution not started yet" when an attempt is selected but hasn't been executed
4. **Updated fallback**: Changed the default case to indicate "Unknown execution state" for unexpected conditions

This provides clearer feedback to users about what's actually happening instead of showing a misleading "Loading..." message when no attempt has been made.
---
 .../src/components/tasks/TaskDetailsPanel.tsx | 30 ++++++++++++++++---
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/tasks/TaskDetailsPanel.tsx b/frontend/src/components/tasks/TaskDetailsPanel.tsx
index 4a8598a7..866af837 100644
--- a/frontend/src/components/tasks/TaskDetailsPanel.tsx
+++ b/frontend/src/components/tasks/TaskDetailsPanel.tsx
@@ -473,8 +473,8 @@ export function TaskDetailsPanel({
 
   // Determine what content to show based on execution state
   const renderMainContent = (): JSX.Element => {
-    if (!executionState) {
-      // Still loading execution state, show loading
+    // Show loading spinner only when we're actually loading data
+    if (loading) {
       return (
         <div className="flex items-center justify-center h-full">
           <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-foreground mx-auto mb-4"></div>
@@ -483,6 +483,28 @@ export function TaskDetailsPanel({
       );
     }
 
+    // If no attempt is selected, show message
+    if (!selectedAttempt) {
+      return (
+        <div className="flex-1 min-h-0 p-6 overflow-y-auto">
+          <div className="text-center py-8 text-muted-foreground">
+            <p>No attempt selected</p>
+          </div>
+        </div>
+      );
+    }
+
+    // If no execution state, execution hasn't started yet
+    if (!executionState) {
+      return (
+        <div className="flex-1 min-h-0 p-6 overflow-y-auto">
+          <div className="text-center py-8 text-muted-foreground">
+            <p>Task execution not started yet</p>
+          </div>
+        </div>
+      );
+    }
+
     const isSetupRunning = executionState.execution_state === 'SetupRunning';
     const isSetupFailed = executionState.execution_state === 'SetupFailed';
     const isCodingAgentRunning =
@@ -901,11 +923,11 @@ export function TaskDetailsPanel({
       );
     }
 
-    // Default case - execution hasn't started or no specific state
+    // Default case - unexpected state
     return (
       <div className="flex-1 min-h-0 p-6 overflow-y-auto">
         <div className="text-center py-8 text-muted-foreground">
-          <p>Task execution not started yet</p>
+          <p>Unknown execution state</p>
         </div>
       </div>
     );