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,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) => {