SearchInput: debounce input and add wait indicator

src/components/SearchInput/SearchInput.tsx

@@ -1,6 +1,7 @@
-import React from "react";
+import React, { useState } from "react";
 import { useRecoilState } from "recoil";
-import { MagnifyingGlass, X } from "phosphor-react";
+import { useDebounce } from "react-use";
+import { MagnifyingGlass, X, HourglassHigh } from "phosphor-react";
 
 import { searchQueryAtom } from "../../state/atoms";
 import "./SearchInput.css";
@@ -8,11 +9,19 @@ import "./SearchInput.css";
 type SearchInputProps = {};
 
 const SearchInput: React.FC<SearchInputProps> = () => {
+  const [value, setValue] = useState<string>("");
   const [query, setQuery] = useRecoilState(searchQueryAtom);
+  void(query);
 
-  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setQuery(event.target.value);
+  const [isReady] = useDebounce(() => setQuery(value), 250, [value]);
+
+  const handleCancelSearch = () => {
+    setValue("");
+    // Should cancel pending debounce timeouts and immediately clear query
+    // without causing lag!
+    // setQuery("");
   };
+
   return (
     <div className="search-bar">
       <MagnifyingGlass size={24} />
@@ -21,11 +30,17 @@ const SearchInput: React.FC<SearchInputProps> = () => {
         aria-label="Search for an icon"
         type="text"
         autoComplete="off"
-        value={query}
+        value={value}
         placeholder="Search for an icon"
-        onChange={handleSearchChange}
+        onChange={({ currentTarget }) => setValue(currentTarget.value)}
       />
-      {query && <X className="clear-icon" size={18} onClick={() => setQuery("")} />}
+      {value ? (
+        isReady() ? (
+          <X className="clear-icon" size={18} onClick={handleCancelSearch} />
+        ) : (
+          <HourglassHigh className="wait-icon" weight="fill" size={18} />
+        )
+      ) : null}
     </div>
   );
 };