Merge branch 'main' of github.com:hydralauncher/hydra

src/renderer/src/pages/home/search-results.tsx

@@ -6,7 +6,7 @@ import type { CatalogueEntry } from "@types";
 import type { DebouncedFunc } from "lodash";
 import { debounce } from "lodash";
 
-import { InboxIcon } from "@primer/octicons-react";
+import { InboxIcon, SearchIcon } from "@primer/octicons-react";
 import { clearSearch } from "@renderer/features";
 import { useAppDispatch } from "@renderer/hooks";
 import { useEffect, useRef, useState } from "react";
@@ -25,8 +25,10 @@ export function SearchResults() {
 
   const [searchResults, setSearchResults] = useState<CatalogueEntry[]>([]);
   const [isLoading, setIsLoading] = useState(false);
+  const [showTypingMessage, setShowTypingMessage] = useState(false);
 
   const debouncedFunc = useRef<DebouncedFunc<() => void> | null>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
 
   const navigate = useNavigate();
 
@@ -38,21 +40,64 @@ export function SearchResults() {
   useEffect(() => {
     setIsLoading(true);
     if (debouncedFunc.current) debouncedFunc.current.cancel();
+    if (abortControllerRef.current) abortControllerRef.current.abort();
+
+    const abortController = new AbortController();
+    abortControllerRef.current = abortController;
 
     debouncedFunc.current = debounce(() => {
+      const query = searchParams.get("query") ?? "";
+
+      if (query.length < 3) {
+        setIsLoading(false);
+        setShowTypingMessage(true);
+        setSearchResults([]);
+        return;
+      }
+
+      setShowTypingMessage(false);
       window.electron
-        .searchGames(searchParams.get("query") ?? "")
+        .searchGames(query)
         .then((results) => {
+          if (abortController.signal.aborted) return;
+
           setSearchResults(results);
+          setIsLoading(false);
         })
-        .finally(() => {
+        .catch(() => {
           setIsLoading(false);
         });
-    }, 300);
+    }, 500);
 
     debouncedFunc.current();
   }, [searchParams, dispatch]);
 
+  const noResultsContent = () => {
+    if (isLoading) return null;
+
+    if (showTypingMessage) {
+      return (
+        <div className={styles.noResults}>
+          <SearchIcon size={56} />
+
+          <p>{t("start_typing")}</p>
+        </div>
+      );
+    }
+
+    if (searchResults.length === 0) {
+      return (
+        <div className={styles.noResults}>
+          <InboxIcon size={56} />
+
+          <p>{t("no_results")}</p>
+        </div>
+      );
+    }
+
+    return null;
+  };
+
   return (
     <SkeletonTheme baseColor={vars.color.background} highlightColor="#444">
       <section className={styles.content}>
@@ -75,13 +120,7 @@ export function SearchResults() {
           )}
         </section>
 
-        {!isLoading && searchResults.length === 0 && (
-          <div className={styles.noResults}>
-            <InboxIcon size={56} />
-
-            <p>{t("no_results")}</p>
-          </div>
-        )}
+        {noResultsContent()}
       </section>
     </SkeletonTheme>
   );