From 5cdfee4b4704be7fcc2811b228f4a68bc75acd7a Mon Sep 17 00:00:00 2001
From: Awesome-E <54484616+Awesome-E@users.noreply.github.com>
Date: Mon, 13 Jan 2025 12:29:05 -0800
Subject: [PATCH] Improve placeholders

---
 site/src/pages/RoadmapPage/SearchSidebar.tsx | 62 ++++++++++++--------
 1 file changed, 39 insertions(+), 23 deletions(-)

diff --git a/site/src/pages/RoadmapPage/SearchSidebar.tsx b/site/src/pages/RoadmapPage/SearchSidebar.tsx
index 3ee67c64..bbf04115 100644
--- a/site/src/pages/RoadmapPage/SearchSidebar.tsx
+++ b/site/src/pages/RoadmapPage/SearchSidebar.tsx
@@ -15,6 +15,7 @@ import Course from './Course';
 import { courseSearchSortable } from '../../helpers/sortable';
 import { Spinner } from 'react-bootstrap';
 import { useNamedAcademicTerm } from '../../hooks/namedAcademicTerm';
+import noResultsImg from '../../asset/no-results-crop.webp';
 
 const CloseRoadmapSearchButton = () => {
   const isMobile = useIsMobile();
@@ -32,6 +33,25 @@ const CloseRoadmapSearchButton = () => {
   );
 };
 
+interface SearchPlaceholderProps {
+  searchInProgress: boolean;
+  showCourseBag: boolean;
+}
+const SearchPlaceholder = ({ searchInProgress, showCourseBag }: SearchPlaceholderProps) => {
+  if (searchInProgress) return <Spinner animation="border" role="status" />;
+
+  const placeholderText = showCourseBag
+    ? 'No courses saved. Try searching for something!'
+    : "Sorry, we couldn't find any results for that search!";
+
+  return (
+    <>
+      <img src={noResultsImg} alt="No results found" />
+      {placeholderText}
+    </>
+  );
+};
+
 const SearchSidebar = () => {
   const isMobile = useIsMobile();
   const showSearch = useAppSelector((state) => state.roadmap.showSearch);
@@ -59,12 +79,6 @@ const SearchSidebar = () => {
     dispatch(setActiveCourse(course));
   };
 
-  const coursebagTitle = coursebag.length ? (
-    <h3 className="coursebag-title">Saved Courses</h3>
-  ) : (
-    <p className="coursebag-title">No courses saved. Try searching for something!</p>
-  );
-
   return (
     <>
       {isMobile && showSearch && <UIOverlay onClick={closeSearch} zIndex={449} passedRef={overlayRef} />}
@@ -72,23 +86,25 @@ const SearchSidebar = () => {
         <div className="search-sidebar-search-module">
           <SearchModule index="courses" />
         </div>
-        {showCourseBag && coursebagTitle}
-
-        <ReactSortable
-          {...courseSearchSortable}
-          list={shownCourses}
-          onStart={setDraggedItem}
-          disabled={isMobile}
-          className={'search-body' + (isMobile ? ' disabled' : '')}
-        >
-          {searchInProgress ? (
-            <div className="no-results">
-              <Spinner animation="border" role="status" />
-            </div>
-          ) : (
-            shownCourses.map((course, i) => <Course {...course} key={i} addMode={isMobile ? 'tap' : 'drag'} />)
-          )}
-        </ReactSortable>
+        {showCourseBag && <h3 className="coursebag-title">Saved Courses</h3>}
+
+        {!searchInProgress && shownCourses.length ? (
+          <ReactSortable
+            {...courseSearchSortable}
+            list={shownCourses}
+            onStart={setDraggedItem}
+            disabled={isMobile}
+            className={'search-body' + (isMobile ? ' disabled' : '')}
+          >
+            {shownCourses.map((course, i) => (
+              <Course {...course} key={i} addMode={isMobile ? 'tap' : 'drag'} />
+            ))}
+          </ReactSortable>
+        ) : (
+          <div className="no-results">
+            <SearchPlaceholder searchInProgress={searchInProgress} showCourseBag={showCourseBag} />
+          </div>
+        )}
         <CloseRoadmapSearchButton />
       </div>
     </>