From ad45f8dab0d3660d4f34806229ce3379b17a1afc Mon Sep 17 00:00:00 2001
From: Robert Brennan <accounts@rbren.io>
Date: Thu, 26 Dec 2024 15:22:03 -0500
Subject: [PATCH] Add loading spinner to task form during conversation creation
 (#5828)

Co-authored-by: openhands <openhands@all-hands.dev>
---
 frontend/src/components/shared/task-form.tsx | 56 +++++++++++---------
 1 file changed, 30 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/shared/task-form.tsx b/frontend/src/components/shared/task-form.tsx
index ce8d1ec328ca..24f4e944aee4 100644
--- a/frontend/src/components/shared/task-form.tsx
+++ b/frontend/src/components/shared/task-form.tsx
@@ -22,6 +22,7 @@ import { cn } from "#/utils/utils";
 import { AttachImageLabel } from "../features/images/attach-image-label";
 import { ImageCarousel } from "../features/images/image-carousel";
 import { UploadImageInput } from "../features/images/upload-image-input";
+import { LoadingSpinner } from "./loading-spinner";
 
 export const TaskForm = React.forwardRef<HTMLFormElement>((_, ref) => {
   const dispatch = useDispatch();
@@ -110,32 +111,35 @@ export const TaskForm = React.forwardRef<HTMLFormElement>((_, ref) => {
             "hover:border-neutral-500 focus-within:border-neutral-500",
           )}
         >
-          <ChatInput
-            name="q"
-            onSubmit={() => {
-              if (typeof ref !== "function") ref?.current?.requestSubmit();
-            }}
-            onChange={(message) => setText(message)}
-            onFocus={() => setInputIsFocused(true)}
-            onBlur={() => setInputIsFocused(false)}
-            onImagePaste={async (imageFiles) => {
-              const promises = imageFiles.map(convertImageToBase64);
-              const base64Images = await Promise.all(promises);
-              base64Images.forEach((base64) => {
-                dispatch(addFile(base64));
-              });
-            }}
-            placeholder={placeholder}
-            value={text}
-            maxRows={15}
-            showButton={!!text}
-            className="text-[17px] leading-5 py-[17px]"
-            buttonClassName="pb-[17px]"
-            disabled={
-              navigation.state === "submitting" ||
-              newConversationMutation.isPending
-            }
-          />
+          {newConversationMutation.isPending ? (
+            <div className="flex justify-center py-[17px]">
+              <LoadingSpinner size="small" />
+            </div>
+          ) : (
+            <ChatInput
+              name="q"
+              onSubmit={() => {
+                if (typeof ref !== "function") ref?.current?.requestSubmit();
+              }}
+              onChange={(message) => setText(message)}
+              onFocus={() => setInputIsFocused(true)}
+              onBlur={() => setInputIsFocused(false)}
+              onImagePaste={async (imageFiles) => {
+                const promises = imageFiles.map(convertImageToBase64);
+                const base64Images = await Promise.all(promises);
+                base64Images.forEach((base64) => {
+                  dispatch(addFile(base64));
+                });
+              }}
+              placeholder={placeholder}
+              value={text}
+              maxRows={15}
+              showButton={!!text}
+              className="text-[17px] leading-5 py-[17px]"
+              buttonClassName="pb-[17px]"
+              disabled={navigation.state === "submitting"}
+            />
+          )}
         </div>
       </form>
       <UploadImageInput