From ff96814a43fa217d082cf77afdbf475aa2f5cf19 Mon Sep 17 00:00:00 2001
From: clean99 <xff9924@gmail.com>
Date: Fri, 24 Nov 2023 11:09:11 +0800
Subject: [PATCH] feat: optimaze loading state ui

---
 frontend/src/App.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index c8db750..66cc119 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -31,6 +31,7 @@ import { UrlInputSection } from "./components/UrlInputSection";
 import TermsOfServiceDialog from "./components/TermsOfServiceDialog";
 import html2canvas from "html2canvas";
 import { USER_CLOSE_WEB_SOCKET_CODE } from "./constants";
+import { handleInstructions } from "./lib/utils";
 
 function App() {
   const [appState, setAppState] = useState<AppState>(AppState.INITIAL);
@@ -116,6 +117,7 @@ function App() {
 
   function doGenerateInstruction(params: InstructionGenerationParams) {
     setAppState(AppState.INSTRUCTION_GENERATING);
+    setUpdateInstruction("");
 
     // Merge settings with params
     const updatedParams = { ...params, ...settings };
@@ -126,7 +128,10 @@ function App() {
       (token) => setUpdateInstruction((prev) => prev + token),
       (code) => setUpdateInstruction(code),
       (line) => setExecutionConsole((prev) => [...prev, line]),
-      () => setAppState(AppState.CODE_READY)
+      () => {
+        setUpdateInstruction(instruction => handleInstructions(instruction));
+        setAppState(AppState.CODE_READY);
+      }
     );
   }
 
@@ -254,7 +259,7 @@ function App() {
                       className="flex items-center gap-x-2"
                       disabled={appState === AppState.INSTRUCTION_GENERATING}
                     >
-                      Generate Instruction
+                      {appState === AppState.INSTRUCTION_GENERATING ? 'Generating Instruction...' : 'Generate Instruction'}
                     </Button>
                     <Button onClick={doUpdate} disabled={appState === AppState.INSTRUCTION_GENERATING}>Update</Button>
                   </div>
@@ -268,6 +273,7 @@ function App() {
                     <Button
                       onClick={reset}
                       className="flex items-center gap-x-2"
+                      disabled={appState === AppState.INSTRUCTION_GENERATING}
                     >
                       <FaUndo />
                       Reset
@@ -324,7 +330,7 @@ function App() {
           </div>
         )}
 
-        {(appState === AppState.CODING || appState === AppState.CODE_READY) && (
+        {(appState === AppState.CODING || appState === AppState.CODE_READY || appState === AppState.INSTRUCTION_GENERATING) && (
           <div className="ml-4">
             <Tabs defaultValue="desktop">
               <div className="flex justify-end mr-8 mb-4">