Searching indicator in autocomplete (#125)

UTDNebula · Nov 15, 2023 · 3f7a02a · 3f7a02a
1 parent 3d24dbe
commit 3f7a02a
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/components/common/SearchBar/searchBar.tsx b/components/common/SearchBar/searchBar.tsx
@@ -29,16 +29,19 @@ type SearchProps = {
 export const SearchBar = (props: SearchProps) => {
   const [open, setOpen] = useState(false);
   const [options, setOptions] = useState<readonly SearchQuery[]>([]);
+  const [loading, setLoading] = useState(false);
 
   const [value, setValue] = useState<SearchQuery | null>(null);
   const [inputValue, setInputValue] = useState('');
 
   useEffect(() => {
     if (open) {
+      setLoading(true);
       let searchValue = inputValue;
       if (searchValue === '') {
         if (!props.searchTerms.length) {
           setOptions([]);
+          setLoading(false);
           return;
         }
         searchValue = searchQueryLabel(
@@ -56,6 +59,7 @@ export const SearchBar = (props: SearchProps) => {
             throw new Error(data.message);
           }
           setOptions(data.data);
+          setLoading(false);
         })
         .catch((error) => {
           if (error instanceof DOMException) {
@@ -74,6 +78,7 @@ export const SearchBar = (props: SearchProps) => {
     <>
       <div className="text-primary w-full max-w-2xl h-fit flex flex-row items-start">
         <Autocomplete
+          loading={loading}
           autoHighlight={true}
           disabled={props.disabled}
           className="w-full h-12 bg-primary-light"

diff --git a/components/common/SplashPageSearchBar/splashPageSearchBar.tsx b/components/common/SplashPageSearchBar/splashPageSearchBar.tsx
@@ -24,12 +24,15 @@ type SearchProps = {
  */
 export const SplashPageSearchBar = (props: SearchProps) => {
   const [options, setOptions] = useState<readonly SearchQuery[]>([]);
+  const [loading, setLoading] = useState(false);
 
   const [inputValue, setInputValue] = useState('');
 
   useEffect(() => {
+    setLoading(true);
     if (inputValue === '') {
       setOptions([]);
+      setLoading(false);
       return;
     }
     const controller = new AbortController();
@@ -43,6 +46,7 @@ export const SplashPageSearchBar = (props: SearchProps) => {
           throw new Error(data.message);
         }
         setOptions(data.data);
+        setLoading(false);
       })
       .catch((error) => {
         if (error instanceof DOMException) {
@@ -60,6 +64,7 @@ export const SplashPageSearchBar = (props: SearchProps) => {
     <>
       <div className="text-primary m-auto w-11/12 -translate-y-1/4">
         <Autocomplete
+          loading={loading}
           autoHighlight={true}
           disabled={props.disabled}
           className="w-full h-12"