From 01939afb40e3e6762793a9e390d087c38fe58117 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Thu, 14 Dec 2023 13:31:56 +0700
Subject: [PATCH] fix: separate model start loader

---
 web/containers/Loader/ModelStart.tsx | 47 +++++++++++++++++++++++++
 web/screens/Chat/index.tsx           | 51 +++-------------------------
 2 files changed, 51 insertions(+), 47 deletions(-)
 create mode 100644 web/containers/Loader/ModelStart.tsx

diff --git a/web/containers/Loader/ModelStart.tsx b/web/containers/Loader/ModelStart.tsx
new file mode 100644
index 0000000000..86a6b378e9
--- /dev/null
+++ b/web/containers/Loader/ModelStart.tsx
@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from 'react'
+
+import { useActiveModel } from '@/hooks/useActiveModel'
+
+export default function ModelStart() {
+  const { stateModel } = useActiveModel()
+  const [loader, setLoader] = useState(0)
+
+  // 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])
+
+  if (!stateModel.loading) return null
+
+  return (
+    <div className=" mb-1 mt-2 py-2 text-center">
+      <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>
+  )
+}
diff --git a/web/screens/Chat/index.tsx b/web/screens/Chat/index.tsx
index 9c7bcd47c7..88a97db71d 100644
--- a/web/screens/Chat/index.tsx
+++ b/web/screens/Chat/index.tsx
@@ -1,11 +1,4 @@
-import {
-  ChangeEvent,
-  Fragment,
-  KeyboardEvent,
-  useEffect,
-  useRef,
-  useState,
-} from 'react'
+import { ChangeEvent, Fragment, KeyboardEvent, useEffect, useRef } from 'react'
 
 import { Button, Textarea } from '@janhq/uikit'
 
@@ -15,6 +8,7 @@ import { twMerge } from 'tailwind-merge'
 
 import LogoMark from '@/containers/Brand/Logo/Mark'
 
+import ModelStart from '@/containers/Loader/ModelStart'
 import { currentPromptAtom } from '@/containers/Providers/Jotai'
 
 import { MainViewState } from '@/constants/screens'
@@ -57,7 +51,6 @@ 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)
@@ -78,31 +71,6 @@ 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
@@ -168,19 +136,8 @@ const ChatScreen = () => {
             </div>
           )}
 
-          {stateModel.loading && (
-            <div className=" mb-1 mt-2 py-2 text-center">
-              <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>
-          )}
+          <ModelStart />
+
           {queuedMessage && (
             <div className="my-2 py-2 text-center">
               <span className="rounded-lg border border-border px-4 py-2 shadow-lg">