From 719d69794a4e2e785e2b273ea62038cdbb805986 Mon Sep 17 00:00:00 2001
From: Nikki Yong <75350534+yongkfn@users.noreply.github.com>
Date: Tue, 5 Mar 2024 14:52:00 +0800
Subject: [PATCH] added loading spinner (#17)

* added loading spinner

Added a spinner component whenever waiting for a query response, so that users know something is still happening

* Updated loading spinner to use native svg/tailwinds & moved it in 'send' button

---------

Co-authored-by: Yee Kit <yeek3063@gmail.com>
---
 .../app/components/ui/chat/chat-actions.tsx   |  4 ++--
 .../app/components/ui/chat/chat-input.tsx     | 22 ++++++++++++++-----
 .../app/components/ui/chat/chat-message.tsx   | 10 ++++-----
 .../app/components/ui/chat/chat-messages.tsx  |  6 ++---
 4 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/frontend/app/components/ui/chat/chat-actions.tsx b/frontend/app/components/ui/chat/chat-actions.tsx
index 6f983c6..da5e3fb 100644
--- a/frontend/app/components/ui/chat/chat-actions.tsx
+++ b/frontend/app/components/ui/chat/chat-actions.tsx
@@ -1,7 +1,7 @@
 import { PauseCircle, RefreshCw } from "lucide-react";
 
-import { Button } from "../button";
-import { ChatHandler } from "./chat.interface";
+import { Button } from "@/app/components/ui/button";
+import { ChatHandler } from "@/app/components/ui/chat/chat.interface";
 
 export default function ChatActions(
   props: Pick<ChatHandler, "stop" | "reload"> & {
diff --git a/frontend/app/components/ui/chat/chat-input.tsx b/frontend/app/components/ui/chat/chat-input.tsx
index 8c04f82..1f0d62d 100644
--- a/frontend/app/components/ui/chat/chat-input.tsx
+++ b/frontend/app/components/ui/chat/chat-input.tsx
@@ -1,6 +1,7 @@
 import { Button } from "@/app/components/ui/button";
 import { Input } from "@/app/components/ui/input";
 import { ChatHandler } from "@/app/components/ui/chat/chat.interface";
+import { IconSpinner } from "@/app/components/ui/icons";
 import { Send } from "lucide-react";
 
 export default function ChatInput(
@@ -23,12 +24,23 @@ export default function ChatInput(
         value={props.input}
         onChange={props.handleInputChange}
       />
-      <Button type="submit" disabled={props.isLoading} className="hidden md:flex items-center transition duration-300 ease-in-out transform hover:scale-110">
-        <span className="pr-2">Send</span>
-        <Send className="h-5 w-5" />
+      <Button type="submit" disabled={props.isLoading} className="hidden md:flex items-center transition duration-300 ease-in-out transform hover:scale-110 z-10">
+        {props.isLoading ? (
+          <IconSpinner className="animate-spin" />
+        ) : (
+          // Fragment to avoid wrapping the text in a button
+          <>
+            <span className="pr-2">Send</span>
+            <Send className="h-5 w-5" />
+          </>
+        )}
       </Button>
-      <Button type="submit" disabled={props.isLoading} className="md:hidden"> {/* Hide on larger screens */}
-        <Send className="h-5 w-5" />
+      <Button type="submit" disabled={props.isLoading} className="md:hidden z-10"> {/* Hide on larger screens */}
+        {props.isLoading ? (
+          <IconSpinner className="animate-spin" />
+        ) : (
+          <Send className="h-5 w-5" />
+        )}
       </Button>
     </form>
   );
diff --git a/frontend/app/components/ui/chat/chat-message.tsx b/frontend/app/components/ui/chat/chat-message.tsx
index ea54c1e..78a5416 100644
--- a/frontend/app/components/ui/chat/chat-message.tsx
+++ b/frontend/app/components/ui/chat/chat-message.tsx
@@ -1,10 +1,10 @@
 import { Check, Copy } from "lucide-react";
 
-import { Button } from "../button";
-import ChatAvatar from "./chat-avatar";
-import { Message } from "./chat.interface";
-import Markdown from "./markdown";
-import { useCopyToClipboard } from "./use-copy-to-clipboard";
+import { Button } from "@/app/components/ui/button";
+import ChatAvatar from "@/app/components/ui/chat/chat-avatar";
+import { Message } from "@/app/components/ui/chat/chat.interface";
+import Markdown from "@/app/components/ui/chat/markdown";
+import { useCopyToClipboard } from "@/app/components/ui/chat/use-copy-to-clipboard";
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 
diff --git a/frontend/app/components/ui/chat/chat-messages.tsx b/frontend/app/components/ui/chat/chat-messages.tsx
index a330dae..aa34037 100644
--- a/frontend/app/components/ui/chat/chat-messages.tsx
+++ b/frontend/app/components/ui/chat/chat-messages.tsx
@@ -1,8 +1,8 @@
 import { useEffect, useRef } from "react";
 
-import ChatActions from "./chat-actions";
-import ChatMessage from "./chat-message";
-import { ChatHandler } from "./chat.interface";
+import ChatActions from "@/app/components/ui/chat/chat-actions";
+import ChatMessage from "@/app/components/ui/chat/chat-message";
+import { ChatHandler } from "@/app/components/ui/chat/chat.interface";
 
 export default function ChatMessages(
   props: Pick<ChatHandler, "messages" | "isLoading" | "reload" | "stop">,