feat: fake loader when starting model

web/screens/Chat/index.tsx

@@ -1,4 +1,11 @@
-import { ChangeEvent, Fragment, KeyboardEvent, useEffect, useRef } from 'react'
+import {
+  ChangeEvent,
+  Fragment,
+  KeyboardEvent,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
 
 import { Button, Textarea } from '@janhq/uikit'
 
@@ -50,6 +57,7 @@ const ChatScreen = () => {
   const [isWaitingToSend, setIsWaitingToSend] = useAtom(waitingToSendMessage)
 
   const showing = useAtomValue(showRightSideBarAtom)
+  const [loader, setLoader] = useState(0)
 
   const textareaRef = useRef<HTMLTextAreaElement>(null)
   const modelRef = useRef(activeModel)
@@ -70,6 +78,31 @@ const ChatScreen = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [waitingToSendMessage, activeThreadId])
 
+  // This is fake loader please fix this when we have realtime percentage when load model
+  useEffect(() => {
+    if (stateModel.loading) {
+      if (loader === 24) {
+        setTimeout(() => {
+          setLoader(loader + 1)
+        }, 250)
+      } else if (loader === 50) {
+        setTimeout(() => {
+          setLoader(loader + 1)
+        }, 250)
+      } else if (loader === 78) {
+        setTimeout(() => {
+          setLoader(loader + 1)
+        }, 250)
+      } else if (loader === 99) {
+        setLoader(99)
+      } else {
+        setLoader(loader + 1)
+      }
+    } else {
+      setLoader(0)
+    }
+  }, [stateModel.loading, loader])
+
   useEffect(() => {
     if (textareaRef.current !== null) {
       const scrollHeight = textareaRef.current.scrollHeight
@@ -136,11 +169,17 @@ const ChatScreen = () => {
           )}
 
           {stateModel.loading && (
-            <div className="mb-1 mt-2 py-2 text-center">
+            <div className=" mb-1 mt-2 py-2 text-center">
-              <span className="rounded-lg border border-border bg-blue-200 px-4 py-2 font-semibold text-blue-600 shadow-lg">
+              <div className="relative inline-block overflow-hidden rounded-lg border border-neutral-50 bg-blue-50 px-4 py-2 font-semibold text-blue-600 shadow-lg">
+                <div
+                  className="absolute left-0 top-0 h-full bg-blue-200"
+                  style={{ width: `${loader}%` }}
+                />
+                <span className="relative z-10">
                   Starting model {stateModel.model}
                 </span>
               </div>
+            </div>
           )}
           {queuedMessage && (
             <div className="my-2 py-2 text-center">