From e39686ad8310c81f50d14205b122e279897fe2b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Franklin=20M=C3=A9ndez?= <franklinjosue.net@gmail.com>
Date: Wed, 24 Jan 2024 10:00:58 -0600
Subject: [PATCH] Add loader

---
 src/components/LoadingLine/LoadingLine.scss | 43 +++++++++++++++++++++
 src/components/LoadingLine/LoadingLine.tsx  |  9 +++++
 src/components/LoadingLine/index.ts         |  1 +
 src/pages/Chat/PromptGenerator.tsx          |  2 +
 4 files changed, 55 insertions(+)
 create mode 100644 src/components/LoadingLine/LoadingLine.scss
 create mode 100644 src/components/LoadingLine/LoadingLine.tsx
 create mode 100644 src/components/LoadingLine/index.ts

diff --git a/src/components/LoadingLine/LoadingLine.scss b/src/components/LoadingLine/LoadingLine.scss
new file mode 100644
index 0000000..5151a5e
--- /dev/null
+++ b/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%;
+    }
+}
\ No newline at end of file
diff --git a/src/components/LoadingLine/LoadingLine.tsx b/src/components/LoadingLine/LoadingLine.tsx
new file mode 100644
index 0000000..4144c2b
--- /dev/null
+++ b/src/components/LoadingLine/LoadingLine.tsx
@@ -0,0 +1,9 @@
+import './LoadingLine.scss'
+
+function LoadingLine() {
+    return (
+        <div className='loader-line'></div>
+    )
+}
+
+export default LoadingLine
diff --git a/src/components/LoadingLine/index.ts b/src/components/LoadingLine/index.ts
new file mode 100644
index 0000000..94e9e72
--- /dev/null
+++ b/src/components/LoadingLine/index.ts
@@ -0,0 +1 @@
+export { default } from './LoadingLine'
diff --git a/src/pages/Chat/PromptGenerator.tsx b/src/pages/Chat/PromptGenerator.tsx
index cdd2ff7..c31bd93 100644
--- a/src/pages/Chat/PromptGenerator.tsx
+++ b/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