feat: search empty state

school/public/css/style.css

@@ -1454,3 +1454,10 @@ pre {
   border: none;
   margin: 0 6px;
 }
+
+.search-empty-state {
+  text-align: center;
+  position: relative;
+  top: 4rem;
+  margin-bottom: 5rem;
+}

school/templates/search_course/search_course.html

@@ -1,3 +1,10 @@
 <input class="search-course w-25 float-right" placeholder="{{ _("Try `Manufacturing` or `Accounting`") }}">
 
+<div id="" class="alert alert-dismissible empty-state search-empty-state hide">
+  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
+  <img class="icon icon-xl" src="/assets/frappe/images/ui-states/search-empty-state.svg">
+  <div class="course-home-headings mt-4 mb-0" style="color: inherit;"> {{ _("No results found") }} </div>
+  <div class="small mb-6"> {{ _("Try some other keyword or explore our list of courses.") }} </div>
+</div>
+
 <script> {% include "school/templates/search_course/search_course.js" %} </script>

school/templates/search_course/search_course.js

@@ -7,8 +7,14 @@ frappe.ready(() => {
 const search_course = (e) => {
   let input = $(e.currentTarget).val();
 
+  if (input == window.input)
+    return;
+
+  window.input = input;
+
   if (input.length < 3 || input.trim() == "") {
     $(".course-card").removeClass("hide");
+    $(".search-empty-state").addClass("hide");
     fix_heading_styles();
     return;
   }
@@ -26,6 +32,14 @@ const search_course = (e) => {
 
 const render_course_list = (courses) => {
   fix_heading_styles();
+  $(".search-empty-state").addClass("hide");
+
+  if (!courses.length) {
+    $(".course-card").removeClass("hide");
+    $(".search-empty-state").removeClass("hide");
+    return;
+  }
+
   $(".course-card").addClass("hide");
   for (course in courses) {
     $("[data-course=" + courses[course].name + "]").removeClass("hide");