Fixed serious cases of flickering upon data load

cornell-dti · Jan 15, 2025 · b6d853a · b6d853a
1 parent 78b408b
commit b6d853a
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 33 deletions.
diff --git a/client/src/modules/Results/Components/PreviewCard.tsx b/client/src/modules/Results/Components/PreviewCard.tsx
@@ -24,19 +24,8 @@ export const PreviewCard = ({ course }: PreviewCardProps) => {
   const [offered, setOffered] = useState('');
   const [loading, setLoading] = useState(true);
 
-  useEffect(() => {
-    setLoading(true);
-    updateCourseInfo();
-    // only set loading to false when top review information has been obtained
-    setLoading(topReview === null);
-  }, []);
-
-  useEffect(() => {
-    updateCourseInfo();
-  }, [course]);
-
   const updateCourseInfo = () => {
-    if (course) {
+    if (course && course._id !== id) {
       setId(course._id);
       setRating(course.classRating ? String(course.classRating) : '-');
       setDiff(course.classDifficulty ? String(course.classDifficulty) : '-');
@@ -57,18 +46,22 @@ export const PreviewCard = ({ course }: PreviewCardProps) => {
             setTopReview({});
             setNumReviews(0);
           }
+          setLoading(false);
         });
     }
   }
 
-  if (!course) {
-    // Return fallback if course is undefined
-    return (
-      <></>
-    );
-  }
+  useEffect(() => {
+    setLoading(true);
+  }, []);
+
+  useEffect(() => {
+    updateCourseInfo();
+  }, [course, updateCourseInfo]);
+
+  if (!course) return (<></>);
 
-  return (
+  return !loading && (
     <div className={styles.container}>
       <div>
         <div className={styles.coursetitle}>
@@ -115,7 +108,7 @@ export const PreviewCard = ({ course }: PreviewCardProps) => {
           </a>
         )}
 
-        {numReviews === 0 && !loading && (
+        {numReviews === 0 && (
           <>
             <img src={Bear} alt="Bear Icon" className={styles.bearicon} />
             <div className={styles.noreviews}>
@@ -128,7 +121,7 @@ export const PreviewCard = ({ course }: PreviewCardProps) => {
             className={styles.reviewsbutton}
             href={`/course/${course.classSub.toUpperCase()}/${course.classNum}`}
           >
-            Leave a Review
+            View course page
           </a>
         )}
       </div>

diff --git a/client/src/modules/Results/Components/ResultsDisplay.tsx b/client/src/modules/Results/Components/ResultsDisplay.tsx
@@ -71,18 +71,13 @@ export const ResultsDisplay = ({
 
   useEffect(() => {
     setCourseList(courses);
-    setCardCourse(courses[0] || {});
-    setFilteredItems(courses);
-    setFilterMap(getInitialFilterMap());
-  }, [courses, userInput]);
-
-  useEffect(() => {
     filterClasses();
-  }, [filterMap]);
+  }, [courses, loading, type, userInput, courseList]);
 
   useEffect(() => {
-    sort(filteredItems);
-  }, [selected]);
+    setFilterMap(getInitialFilterMap());
+    filterClasses();
+  }, [userInput]);
 
   /**
    * Handles selecting different sort filters
@@ -176,7 +171,6 @@ export const ResultsDisplay = ({
       );
     }
 
-    setFilteredItems(filtered);
     sort(filtered);
   };
 
@@ -377,8 +371,8 @@ export const ResultsDisplay = ({
               <div className={styles.noitems}>
                 <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!" : "!"}
+                  No classes found. Try another search
+                  {courseList.length !== 0 ? " or switch up the filters!" : "!"}
                 </div>
               </div>
             )}