From 92c55c30889db758b326d5bfc3d2f06c03ee63e4 Mon Sep 17 00:00:00 2001
From: Wang Zixiao <wayne.wang0821@gmail.com>
Date: Mon, 17 Jun 2024 17:16:48 +0800
Subject: [PATCH] fix(ui): stop button display after loading (#2427)

* fix(ui): stop button display after loading

* decrease delay time of show stop

* update
---
 ee/tabby-ui/app/(home)/components/search.tsx | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/ee/tabby-ui/app/(home)/components/search.tsx b/ee/tabby-ui/app/(home)/components/search.tsx
index 11347a5311c5..661df0d68ec4 100644
--- a/ee/tabby-ui/app/(home)/components/search.tsx
+++ b/ee/tabby-ui/app/(home)/components/search.tsx
@@ -17,6 +17,7 @@ import remarkGfm from 'remark-gfm'
 import remarkMath from 'remark-math'
 
 import { useEnableSearch } from '@/lib/experiment-flags'
+import { useLatest } from '@/lib/hooks/use-latest'
 import { useIsChatEnabled } from '@/lib/hooks/use-server-info'
 import { useTabbyAnswer } from '@/lib/hooks/use-tabby-answer'
 import fetcher from '@/lib/tabby/fetcher'
@@ -113,6 +114,8 @@ export function SearchRenderer({}, ref: ForwardedRef<SearchRef>) {
     fetcher: tabbyFetcher
   })
 
+  const isLoadingRef = useLatest(isLoading)
+
   useImperativeHandle(
     ref,
     () => {
@@ -171,9 +174,11 @@ export function SearchRenderer({}, ref: ForwardedRef<SearchRef>) {
   }, [error])
 
   // Delay showing the stop button
+  let showStopTimeoutId: number
   useEffect(() => {
-    if (isLoading) {
-      setTimeout(() => {
+    if (isLoadingRef.current) {
+      showStopTimeoutId = window.setTimeout(() => {
+        if (!isLoadingRef.current) return
         setShowStop(true)
 
         // Scroll to the bottom
@@ -187,12 +192,16 @@ export function SearchRenderer({}, ref: ForwardedRef<SearchRef>) {
             })
           }
         }
-      }, 1500)
+      }, 300)
     }
 
-    if (!isLoading) {
+    if (!isLoadingRef.current) {
       setShowStop(false)
     }
+
+    return () => {
+      window.clearTimeout(showStopTimeoutId)
+    }
   }, [isLoading])
 
   const onSubmitSearch = (question: string) => {