From 0cbb0c1681601e088adbbf7af6a7b126e91623d6 Mon Sep 17 00:00:00 2001
From: GCWing <gcwing@foxmail.com>
Date: Tue, 17 Mar 2026 11:12:02 +0800
Subject: [PATCH] feat(plan): add loading indicator to CreatePlanDisplay

- Add CubeLoading component when plan is loading
- Add create-plan-loading style for loading state
- Fix disabled button cursor from not-allowed to default

Generated with BitFun

Co-Authored-By: BitFun
---
 .../src/flow_chat/tool-cards/CreatePlanDisplay.scss    | 10 ++++++----
 .../src/flow_chat/tool-cards/CreatePlanDisplay.tsx     |  5 ++++-
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/web-ui/src/flow_chat/tool-cards/CreatePlanDisplay.scss b/src/web-ui/src/flow_chat/tool-cards/CreatePlanDisplay.scss
index 2a4574bd..87fe3b8a 100644
--- a/src/web-ui/src/flow_chat/tool-cards/CreatePlanDisplay.scss
+++ b/src/web-ui/src/flow_chat/tool-cards/CreatePlanDisplay.scss
@@ -78,6 +78,10 @@
       font-family: var(--tool-card-font-mono);
       color: var(--tool-card-text-secondary);
     }
+
+    .create-plan-loading {
+      color: var(--tool-card-text-muted);
+    }
   }
 
   .create-plan-content {
@@ -262,7 +266,7 @@
 
       &:disabled {
         opacity: 0.5;
-        cursor: not-allowed;
+        cursor: default;
       }
     }
 
@@ -292,7 +296,7 @@
 
       &:disabled {
         opacity: 0.7;
-        cursor: not-allowed;
+        cursor: default;
       }
 
       svg {
@@ -303,13 +307,11 @@
       // Building state keeps the orange styling.
       &--building {
         background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
-        cursor: wait;
       }
 
       // Built state uses the success green styling.
       &--built {
         background: linear-gradient(135deg, #10b981 0%, #059669 100%);
-        cursor: default;
         
         &:hover {
           background: linear-gradient(135deg, #10b981 0%, #059669 100%);
diff --git a/src/web-ui/src/flow_chat/tool-cards/CreatePlanDisplay.tsx b/src/web-ui/src/flow_chat/tool-cards/CreatePlanDisplay.tsx
index 0801f244..2852a604 100644
--- a/src/web-ui/src/flow_chat/tool-cards/CreatePlanDisplay.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/CreatePlanDisplay.tsx
@@ -15,7 +15,7 @@ import { workspaceAPI } from '@/infrastructure/api/service-api/WorkspaceAPI';
 import { fileSystemService } from '@/tools/file-system/services/FileSystemService';
 import { planBuildStateService } from '@/shared/services/PlanBuildStateService';
 import yaml from 'yaml';
-import { Tooltip } from '@/component-library';
+import { Tooltip, CubeLoading } from '@/component-library';
 import { createLogger } from '@/shared/utils/logger';
 import './CreatePlanDisplay.scss';
 
@@ -321,6 +321,9 @@ ${JSON.stringify(simpleTodos, null, 2)}
             </div>
             <span className="file-name">{planFileName}</span>
           </div>
+          {isLoading && (
+            <CubeLoading size="small" className="create-plan-loading" />
+          )}
         </div>
       </Tooltip>