Fix flickering upon search page load, no results style

cornell-dti · Jan 15, 2025 · f613cfd · f613cfd
1 parent 2409210
commit f613cfd
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 45 deletions.
diff --git a/client/src/modules/Results/Components/PreviewCard.tsx b/client/src/modules/Results/Components/PreviewCard.tsx
@@ -18,46 +18,48 @@ export const PreviewCard = ({ course }: PreviewCardProps) => {
   const [rating, setRating] = useState('-');
   const [diff, setDiff] = useState('-');
   const [workload, setWorkload] = useState('-');
-  const [topReview, setTopReview] = useState<ReviewType | {}>();
+  const [topReview, setTopReview] = useState<ReviewType | {} | null>(null);
   const [numReviews, setNumReviews] = useState(0);
   const [topReviewLikes, setTopReviewLikes] = useState(0);
   const [offered, setOffered] = useState('');
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    if (course) {
-      updateGauges();
-    }
+    setLoading(true);
+    updateCourseInfo();
+    // only set loading to false when top review information has been obtained
+    setLoading(topReview === null);
+  }, []);
+
+  useEffect(() => {
+    updateCourseInfo();
   }, [course]);
 
-  const updateGauges = () => {
+  const updateCourseInfo = () => {
     if (course) {
       setId(course._id);
       setRating(course.classRating ? String(course.classRating) : '-');
       setDiff(course.classDifficulty ? String(course.classDifficulty) : '-');
       setWorkload(course.classWorkload ? String(course.classWorkload) : '-');
-      updateTopReview();
+
+      axios.post(`/api/courses/get-reviews`, { courseId: course ? course._id : id })
+        .then((response) => {
+          const reviews = response.data.result;
+          if (reviews && reviews.length > 0) {
+            reviews.sort((a: ReviewType, b: ReviewType) =>
+              (a.likes || 0) < (b.likes || 0) ? 1 : -1
+            );
+            setTopReview(reviews[0]);
+            setTopReviewLikes(reviews[0].likes || 0);
+            setNumReviews(reviews.length);
+            setOffered(lastOfferedSems(course));
+          } else {
+            setTopReview({});
+            setNumReviews(0);
+          }
+        });
     }
-  };
-
-  const updateTopReview = () => {
-    axios
-      .post(`/api/courses/get-reviews`, { courseId: course ? course._id : id })
-      .then((response) => {
-        const reviews = response.data.result;
-        if (reviews && reviews.length > 0) {
-          reviews.sort((a: ReviewType, b: ReviewType) =>
-            (a.likes || 0) < (b.likes || 0) ? 1 : -1
-          );
-          setTopReview(reviews[0]);
-          setTopReviewLikes(reviews[0].likes || 0);
-          setNumReviews(reviews.length);
-          setOffered(lastOfferedSems(course));
-        } else {
-          setTopReview({});
-          setNumReviews(0);
-        }
-      });
-  };
+  }
 
   if (!course) {
     // Return fallback if course is undefined
@@ -113,7 +115,7 @@ export const PreviewCard = ({ course }: PreviewCardProps) => {
           </a>
         )}
 
-        {numReviews === 0 && topReview !== undefined && (
+        {numReviews === 0 && !loading && (
           <>
             <img src={Bear} alt="Bear Icon" className={styles.bearicon} />
             <div className={styles.noreviews}>

diff --git a/client/src/modules/Results/Components/ResultsDisplay.tsx b/client/src/modules/Results/Components/ResultsDisplay.tsx
@@ -263,38 +263,41 @@ export const ResultsDisplay = ({
 
   return (
     <div className={styles.container}>
-      {loading && <Loading/>}
+      {loading && <Loading />}
       {/* Case where results are returned, even if zero */}
       {!loading && (
         <div className={styles.layout} data-cy="results-display">
           {/* Case where no results returned */}
           <div className={styles.leftbar}>
-            <h1> Search Results </h1>
+            {courseList.length !== 0 && <h1> Search Results </h1>}
             {/*<button*/}
             {/*  className={styles.filterbutton}*/}
             {/*  onClick={() => setSearchListViewEnabled(!searchListViewEnabled)}*/}
             {/*>*/}
             {/*  {searchListViewEnabled ? 'Hide' : 'View'} Search Results*/}
             {/*</button>*/}
             <div className={styles.filtersearch}>
-              <div className={styles.filtercol}>
-                <div className={styles.filtertext}>Filter</div>
-                <div>
-                  <div className={styles.filtercategory}>Semester</div>
-                  {renderCheckboxes('semesters')}
+              {courseList.length !== 0 && (
+                <div className={styles.filtercol}>
+                  <div className={styles.filtertext}>Filter</div>
+                  <div>
+                    <div className={styles.filtercategory}>Semester</div>
+                    {renderCheckboxes('semesters')}
+                  </div>
+                  <div>
+                    <div className={styles.filtercategory}>Level</div>
+                    {renderCheckboxes('levels')}
+                  </div>
                 </div>
-                <div>
-                  <div className={styles.filtercategory}>Level</div>
-                  {renderCheckboxes('levels')}
-                </div>
-              </div>
+              )}
 
               {filteredItems.length !== 0 && (
                 <div className={styles.columns}>
                   {searchListViewEnabled && (
                     <>
                       <div>
-                        We found <b>{filteredItems.length}</b> courses for &quot;
+                        We found <b>{filteredItems.length}</b> courses for
+                        &quot;
                         {userInput}
                         &quot;
                       </div>
@@ -339,9 +342,9 @@ export const ResultsDisplay = ({
                       </div>
                     </>
                   )}
-              </div>
+                </div>
               )}
-              {filteredItems.length === 0 && (
+              {filteredItems.length === 0 && courseList.length !== 0 && (
                 <div className={styles.columns}>
                   {searchListViewEnabled && (
                     <>
@@ -372,8 +375,11 @@ export const ResultsDisplay = ({
 
           {filteredItems.length === 0 && (
             <div className={styles.noitems}>
-              <img src={Bear} alt="Bear Icon" className={styles.bearicon}/>
-              <div>No classes found. Try searching something else or switching up the filters!</div>
+              <img src={Bear} alt="Bear Icon" className={styles.bearicon} />
+              <div>
+                No classes found. Try searching something else
+                {courseList.length !== 0 ? " or switching up the filters!" : "!"}
+              </div>
               {/*  <img*/}
               {/*    src="/noResults.svg"*/}
               {/*    className={styles.noresultimg}*/}