perf: loadSearchData on focus & show loading only once (#1915)

umijs · Sep 26, 2023 · d72e8fe · d72e8fe
1 parent e0cac83
commit d72e8fe
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/src/client/theme-api/useSiteSearch/index.ts b/src/client/theme-api/useSiteSearch/index.ts
@@ -38,9 +38,7 @@ if (typeof window !== 'undefined') {
 
 export const useSiteSearch = () => {
   const debounceTimer = useRef<number>();
-  // const routes = useLocaleDocRoutes();
-  // const { demos } = useSiteData();
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(true);
   const [keywords, setKeywords] = useState('');
   const [enabled, setEnabled] = useState(false);
   const navData = useNavData();

diff --git a/src/client/theme-default/slots/SearchBar/index.tsx b/src/client/theme-default/slots/SearchBar/index.tsx
@@ -80,6 +80,7 @@ const SearchBar: FC = () => {
       <Input
         onFocus={() => {
           setFocusing(true);
+          loadSearchData();
         }}
         onMouseEnter={() => {
           loadSearchData();

diff --git a/src/client/theme-default/slots/SearchResult/index.tsx b/src/client/theme-default/slots/SearchResult/index.tsx
@@ -119,6 +119,13 @@ const SearchResult: FC<{
 }> = (props) => {
   const [data, histsCount] = useFlatSearchData(props.data);
   const [activeIndex, setActiveIndex] = useState(-1);
+  const [loading, setLoading] = useState(props.loading);
+
+  useEffect(() => {
+    if (!props.loading) {
+      setLoading(false);
+    }
+  }, [props.loading]);
 
   useEffect(() => {
     const handler = (ev: KeyboardEvent) => {
@@ -149,7 +156,7 @@ const SearchResult: FC<{
 
   let returnNode: React.ReactNode = null;
 
-  if (props.loading) {
+  if (loading) {
     returnNode = (
       <div className="dumi-default-search-empty">
         <IconInbox />