set loading results.state earlier so user feels less lag (Skeleton ro…

…ws show up faster in dashboard)
UTDNebula · Nov 24, 2024 · a303478 · a303478
1 parent 6972a70
commit a303478
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 4 deletions.
diff --git a/src/components/navigation/topMenu/topMenu.tsx b/src/components/navigation/topMenu/topMenu.tsx
@@ -8,11 +8,18 @@ import React, { useState } from 'react';
 import Background from '@/../public/background.png';
 import SearchBar from '@/components/search/SearchBar/searchBar';
 
+/**
+ * Props type used by the TopMenu component
+ */
+interface TopMenuProps {
+  setSearchResultsLoading: (value: 'loading' | 'done' | 'error') => void;
+}
+
 /**
  * This is a component to hold UTD Trends branding and basic navigation
  * @returns
  */
-export function TopMenu() {
+export function TopMenu({setSearchResultsLoading} : TopMenuProps) {
   const router = useRouter();
   const [openCopied, setOpenCopied] = useState(false);
 
@@ -46,6 +53,7 @@ export function TopMenu() {
   const searchBar = (
     <SearchBar
       manageQuery="onSelect"
+      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
@@ -17,6 +17,7 @@ import {
 interface SearchProps {
   manageQuery?: 'onSelect' | 'onChange';
   onSelect?: (value: SearchQuery[]) => void;
+  setSearchResultsLoading: (value: 'loading' | 'done' | 'error') => void;
   className?: string;
   input_className?: string;
   autoFocus?: boolean;
@@ -31,6 +32,7 @@ interface SearchProps {
 const SearchBar = ({
   manageQuery,
   onSelect,
+  setSearchResultsLoading,
   className,
   input_className,
   autoFocus,
@@ -213,6 +215,8 @@ const SearchBar = ({
           if (!newValue.every((el) => typeof el !== 'string')) {
             return;
           }
+          if (typeof setSearchResultsLoading !== 'undefined')
+            setSearchResultsLoading('loading');
           //remove from options
           if (newValue.length > value.length) {
             setOptions((old) =>
@@ -323,7 +327,11 @@ const SearchBar = ({
             '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={() => onSelect_internal(value)}
+          onClick={() => { 
+            if (typeof setSearchResultsLoading !== 'undefined')
+              setSearchResultsLoading('loading');
+            onSelect_internal(value) 
+          }}
         >
           Search
         </Button>

diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
@@ -329,6 +329,8 @@ export const Dashboard: NextPage<{ pageTitle: string }> = ({
     state: 'loading',
   });
 
+  const [searchResultsLoading, setSearchResultsLoading] = useState<'loading' | 'done' | 'error'>('done');
+
   //On search change, seperate into courses and profs, clear data, and fetch new results
   useEffect(() => {
     if (router.isReady) {
@@ -375,10 +377,12 @@ export const Dashboard: NextPage<{ pageTitle: string }> = ({
               state: 'done',
               data: res,
             });
+            setSearchResultsLoading('done');
             getData(res, controller);
           })
           .catch((error) => {
             setResults({ state: 'error', data: [] });
+            setSearchResultsLoading('error');
             console.error('Search Results', error);
           });
       } else if (professorSearchTerms.length > 0) {
@@ -388,18 +392,20 @@ export const Dashboard: NextPage<{ pageTitle: string }> = ({
               state: 'done',
               data: res,
             });
+            setSearchResultsLoading('done');
             getData(res, controller);
           })
           .catch((error) => {
             setResults({ state: 'error', data: [] });
+            setSearchResultsLoading('error');
             console.error('Search Results', error);
           });
       }
       return () => {
         controller.abort();
       };
     }
-  }, [router.isReady, router.query.searchTerms]);
+  }, [router.isReady, router.query.searchTerms, searchResultsLoading]);
 
   //Compiled list of academic sessions grade data is available for
   const [academicSessions, setAcademicSessions] = useState<string[]>([]);
@@ -913,7 +919,7 @@ export const Dashboard: NextPage<{ pageTitle: string }> = ({
         />
       </Head>
       <div className="w-full bg-light h-full">
-        <TopMenu />
+        <TopMenu setSearchResultsLoading={setSearchResultsLoading}/>
         <main className="p-4">{contentComponent}</main>
       </div>
     </>