Add loader

src/components/LoadingLine/LoadingLine.scss

@@ -0,0 +1,43 @@
+.loader-line {
+    width: 40%;
+    min-height: 3px;
+    max-height: 3px;
+    position: relative;
+    overflow: hidden;
+    background-color: #fff;
+    margin: auto;
+    -webkit-border-radius: 20px;
+    -moz-border-radius: 20px;
+    border-radius: 20px;
+
+    &:before {
+        content: "";
+        position: absolute;
+        left: -50%;
+        height: 3px;
+        width: 40%;
+        background-color: #096EFF;
+        -webkit-animation: lineAnim 1s linear infinite;
+        -moz-animation: lineAnim 1s linear infinite;
+        animation: lineAnim 1s linear infinite;
+        -webkit-border-radius: 20px;
+        -moz-border-radius: 20px;
+        border-radius: 20px;
+    }
+}
+
+@keyframes lineAnim {
+    0% {
+        left: -40%;
+    }
+
+    50% {
+        left: 20%;
+        width: 80%;
+    }
+
+    100% {
+        left: 100%;
+        width: 100%;
+    }
+}

src/components/LoadingLine/LoadingLine.tsx

@@ -0,0 +1,9 @@
+import './LoadingLine.scss'
+
+function LoadingLine() {
+    return (
+        <div className='loader-line'></div>
+    )
+}
+
+export default LoadingLine

src/components/LoadingLine/index.ts

@@ -0,0 +1 @@
+export { default } from './LoadingLine'

src/pages/Chat/PromptGenerator.tsx

@@ -2,6 +2,7 @@ import ReactMarkdown from 'react-markdown'
 import Button from '@components/Button'
 import { usePromptGenerator } from './hooks'
 import { useRef, useEffect } from 'react'
+import LoadingLine from '@components/LoadingLine'
 
 function PromptGenerator() {
   const { handlePromptChange, handleSendPrompt, handleKeyDown, data, prompt, textareaRef, loading } = usePromptGenerator()
@@ -28,6 +29,7 @@ function PromptGenerator() {
               )}
             </div>
           ))}
+          {loading && <LoadingLine />}
       </div>
       <div className='message-input-container'>
         <textarea