Loading icon in 'Search' button

UTDNebula · Nov 24, 2024 · c8fb774 · c8fb774
1 parent a303478
commit c8fb774
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 10 deletions.
diff --git a/src/components/navigation/topMenu/topMenu.tsx b/src/components/navigation/topMenu/topMenu.tsx
@@ -12,14 +12,18 @@ import SearchBar from '@/components/search/SearchBar/searchBar';
  * Props type used by the TopMenu component
  */
 interface TopMenuProps {
+  searchResultsLoading: 'loading' | 'done' | 'error';
   setSearchResultsLoading: (value: 'loading' | 'done' | 'error') => void;
 }
 
 /**
  * This is a component to hold UTD Trends branding and basic navigation
  * @returns
  */
-export function TopMenu({setSearchResultsLoading} : TopMenuProps) {
+export function TopMenu({
+  searchResultsLoading,
+  setSearchResultsLoading,
+}: TopMenuProps) {
   const router = useRouter();
   const [openCopied, setOpenCopied] = useState(false);
 
@@ -53,6 +57,7 @@ export function TopMenu({setSearchResultsLoading} : TopMenuProps) {
   const searchBar = (
     <SearchBar
       manageQuery="onSelect"
+      searchResultsLoading={searchResultsLoading}
       setSearchResultsLoading={setSearchResultsLoading}
       className={'shrink ' + (matches ? 'basis-[32rem]' : 'basis-full')}
       input_className="[&>.MuiInputBase-root]:bg-white [&>.MuiInputBase-root]:dark:bg-haiti"

diff --git a/src/components/search/SearchBar/searchBar.tsx b/src/components/search/SearchBar/searchBar.tsx
@@ -1,4 +1,10 @@
-import { Autocomplete, Button, TextField, Tooltip } from '@mui/material';
+import {
+  Autocomplete,
+  Button,
+  CircularProgress,
+  TextField,
+  Tooltip,
+} from '@mui/material';
 import match from 'autosuggest-highlight/match';
 import parse from 'autosuggest-highlight/parse';
 import { useRouter } from 'next/router';
@@ -17,7 +23,8 @@ import {
 interface SearchProps {
   manageQuery?: 'onSelect' | 'onChange';
   onSelect?: (value: SearchQuery[]) => void;
-  setSearchResultsLoading: (value: 'loading' | 'done' | 'error') => void;
+  searchResultsLoading?: 'loading' | 'done' | 'error';
+  setSearchResultsLoading?: (value: 'loading' | 'done' | 'error') => void;
   className?: string;
   input_className?: string;
   autoFocus?: boolean;
@@ -32,6 +39,7 @@ interface SearchProps {
 const SearchBar = ({
   manageQuery,
   onSelect,
+  searchResultsLoading,
   setSearchResultsLoading,
   className,
   input_className,
@@ -193,7 +201,7 @@ const SearchBar = ({
         multiple
         freeSolo
         loading={loading}
-        //highligh first option to add with enter
+        //highlight first option to add with enter
         autoHighlight={true}
         clearOnBlur={false}
         className="grow"
@@ -324,16 +332,20 @@ const SearchBar = ({
           disableElevation
           size="large"
           className={
-            'shrink-0 normal-case bg-royal hover:bg-royalDark' +
+            'h-11 w-[5.5rem] shrink-0 normal-case bg-royal hover:bg-royalDark' +
             (value.length == 0 ? ' text-cornflower-200' : '')
           } //darkens the text when no valid search terms are entered (pseudo-disables the search button)
-          onClick={() => { 
+          onClick={() => {
             if (typeof setSearchResultsLoading !== 'undefined')
               setSearchResultsLoading('loading');
-            onSelect_internal(value) 
+            onSelect_internal(value);
           }}
         >
-          Search
+          {searchResultsLoading === 'loading' ? (
+            <CircularProgress className="h-6 w-6 text-cornflower-50 dark:text-cornflower-800" />
+          ) : (
+            'Search'
+          )}
         </Button>
       </Tooltip>
     </div>

diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
@@ -329,7 +329,9 @@ export const Dashboard: NextPage<{ pageTitle: string }> = ({
     state: 'loading',
   });
 
-  const [searchResultsLoading, setSearchResultsLoading] = useState<'loading' | 'done' | 'error'>('done');
+  const [searchResultsLoading, setSearchResultsLoading] = useState<
+    'loading' | 'done' | 'error'
+  >('done');
 
   //On search change, seperate into courses and profs, clear data, and fetch new results
   useEffect(() => {
@@ -919,7 +921,10 @@ export const Dashboard: NextPage<{ pageTitle: string }> = ({
         />
       </Head>
       <div className="w-full bg-light h-full">
-        <TopMenu setSearchResultsLoading={setSearchResultsLoading}/>
+        <TopMenu
+          searchResultsLoading={searchResultsLoading}
+          setSearchResultsLoading={setSearchResultsLoading}
+        />
         <main className="p-4">{contentComponent}</main>
       </div>
     </>