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 <[email protected]>
digitalbuiltenvironment · Mar 5, 2024 · 719d697 · 719d697 · xKhronoz · Mar 5, 2024
1 parent 7d9d30d
commit 719d697
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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">,