From 3f7a02a8b52a2dd750a45b399709cbede5f4249d Mon Sep 17 00:00:00 2001
From: Tyler Hill <gotyhill@gmail.com>
Date: Wed, 15 Nov 2023 11:44:36 -0600
Subject: [PATCH] Searching indicator in autocomplete (#125)

---
 components/common/SearchBar/searchBar.tsx                    | 5 +++++
 .../common/SplashPageSearchBar/splashPageSearchBar.tsx       | 5 +++++
 2 files changed, 10 insertions(+)

diff --git a/components/common/SearchBar/searchBar.tsx b/components/common/SearchBar/searchBar.tsx
index d468b075..f5c390fc 100644
--- 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
index b3654275..e24603c2 100644
--- 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"