search nw displays the search results.

other section are being hidden in the case of a search and vice versa.
a 'nothing found' div was implemented

src/main/resources/static/main.js

@@ -2,6 +2,7 @@ import { fetchQuery } from "./contentUtility.js";
 
 const apiEndpoint = "/api/v1/datasets";
 const baseURL = location.origin;
+const searchDelay = 500;
 const defaultPagingValue = 20;
 const lastQuery = {
     url: "",
@@ -17,6 +18,9 @@ const searchBar = document.getElementById("search-entry");
 const sortButton = document.getElementById("sort-btn");
 const upvoteButtons = document.getElementsByClassName("upvote-btn");
 const downvoteButtons = document.getElementsByClassName("downvote-btn");
+export const searchSection = document.getElementById("search");
+const recentSection = document.getElementById("recents");
+const mostLikedSection = document.getElementById("top");
 
 // ID of the timeout, because we need to cancel it at some point
 export let searchBarTimeout;
@@ -37,11 +41,21 @@ searchButton.addEventListener("click", () => {
 });
 
 searchBar.addEventListener("input", () => {
+    if (searchBar.value === "") {
+        searchSection.classList.add("hidden");
+        recentSection.classList.remove("hidden");
+        mostLikedSection.classList.remove("hidden");
+    } else {
+        searchSection.classList.remove("hidden");
+        recentSection.classList.add("hidden");
+        mostLikedSection.classList.add("hidden");
+    }
+
     clearTimeout(searchBarTimeout);
     searchBarTimeout = setTimeout(() => {
         const searchString = searchBar.value;
         search(searchString);
-    }, 1000);
+    }, searchDelay);
 });
 
 searchBar.addEventListener('keypress', function (e) {