fix: make fileCount rendering in real-time

Author: SigureMo

src/webview/SearchSidebar/index.tsx

@@ -5,6 +5,7 @@ import { UseDarkContextProvider } from '../hooks/useDark'
 import { useSearchResult } from '../hooks/useSearch'
 import LoadingBar from '../LoadingBar'
 import SearchProviderMessage from './SearchProviderMessage'
+import { useDeferredValue } from 'react'
 
 export const SearchSidebar = () => {
   const [inputValue = '', setInputValue] = useLocalStorage(
@@ -19,6 +20,11 @@ export const SearchSidebar = () => {
     searching
   } = useSearchResult(inputValue)
 
+  // rendering tree is too expensive, useDeferredValue
+  const groupedByFileSearchResultForRender = useDeferredValue(
+    groupedByFileSearchResult
+  )
+
   return (
     <UseDarkContextProvider>
       <LoadingBar loading={searching} />
@@ -32,7 +38,7 @@ export const SearchSidebar = () => {
         resultCount={searchCount}
         fileCount={groupedByFileSearchResult.length}
       />
-      <SearchResultList matches={groupedByFileSearchResult} />
+      <SearchResultList matches={groupedByFileSearchResultForRender} />
     </UseDarkContextProvider>
   )
 }

src/webview/hooks/useSearch.tsx

@@ -1,6 +1,6 @@
 import type { DisplayResult } from '../postMessage'
 import { childPort } from '../postMessage'
-import { useCallback, useDeferredValue, useSyncExternalStore } from 'react'
+import { useCallback, useSyncExternalStore } from 'react'
 import { useDebounce } from 'react-use'
 
 // id should not overflow, the MOD is large enough
@@ -99,15 +99,12 @@ export const useSearchResult = (inputValue: string) => {
     postSearch(inputValue)
   }, [inputValue])
 
-  // rendering tree is too expensive, useDeferredValue
-  const groupedByFileSearchResult = useDeferredValue(grouped)
-
   useDebounce(refreshSearchResult, 100, [inputValue])
 
   return {
     queryInFlight,
     searching,
-    groupedByFileSearchResult,
+    groupedByFileSearchResult: grouped,
     searchCount: grouped.reduce((a, l) => a + l[1].length, 0),
     refreshSearchResult
   }