chore: improve search UX (#1037)

chore: improve UX for search

Author: ken-matsui

app/_components/search.tsx

@@ -2,38 +2,57 @@
 
 import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Input } from "@heroui/react";
+import { Input, Spinner } from "@heroui/react";
 import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { useState, useTransition } from "react";
 
 export function SearchButton() {
     const [value, setValue] = useState("");
+    const [isPending, startTransition] = useTransition();
     const router = useRouter();
 
     const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-        if (event.key === "Enter") {
-            router.push(`/search?q=${value}`);
+        if (event.key === "Enter" && value.trim()) {
+            startTransition(() => {
+                router.push(`/search?q=${encodeURIComponent(value.trim())}`);
+            });
+        }
+    };
+
+    const handleSubmit = (event: React.FormEvent) => {
+        event.preventDefault();
+        if (value.trim()) {
+            startTransition(() => {
+                router.push(`/search?q=${encodeURIComponent(value.trim())}`);
+            });
         }
     };
 
     return (
-        <Input
-            type="search"
-            placeholder="Search packages"
-            aria-label="Search packages"
-            labelPlacement="outside"
-            startContent={
-                <FontAwesomeIcon
-                    className="text-default-600 dark:text-default-500"
-                    icon={faMagnifyingGlass}
-                    width={13}
-                />
-            }
-            value={value}
-            onValueChange={setValue}
-            onKeyDown={handleKeyDown}
-        >
-            Search packages
-        </Input>
+        <form onSubmit={handleSubmit}>
+            <Input
+                type="search"
+                placeholder="Search packages"
+                aria-label="Search packages"
+                labelPlacement="outside"
+                startContent={
+                    isPending ? (
+                        <Spinner size="sm" className="text-default-600" />
+                    ) : (
+                        <FontAwesomeIcon
+                            className="text-default-600 dark:text-default-500"
+                            icon={faMagnifyingGlass}
+                            width={13}
+                        />
+                    )
+                }
+                value={value}
+                onValueChange={setValue}
+                onKeyDown={handleKeyDown}
+                isDisabled={isPending}
+            >
+                Search packages
+            </Input>
+        </form>
     );
 }

app/search/loading.tsx

@@ -0,0 +1,5 @@
+import { Loading } from "../_components/loading";
+
+export default function SearchLoading() {
+    return <Loading />;
+}