feat: Add NotFound component to display when no search results are fo…

…und. Also now we show the loading spinner while debouncing

apps/web/src/components/SearchInput/index.tsx

@@ -7,11 +7,12 @@ import { api } from "~/api-client";
 import type { RouterOutputs } from "~/api-client";
 import { useClickOutside } from "~/hooks/useClickOutside";
 import { useDebounce } from "~/hooks/useDebounce";
+import EmptyBox from "~/icons/empty-box.svg";
+import Loading from "~/icons/loading.svg";
 import NextError from "~/pages/_error";
 import { getRouteBySearchCategory } from "~/utils";
 import { Button } from "../Button";
 import { Input } from "../Input";
-import { Loading } from "../Loading";
 import { SearchResults } from "./SearchResults";
 import type { SearchResultsProps } from "./SearchResults";
 
@@ -91,13 +92,23 @@ export const SearchInput: React.FC<SearchInputProps> = function ({
     );
   }
 
+  const debouncing = term !== debouncedTerm;
+
   const searchResults = searchQuery.data;
   const displayResults =
     !!searchResults &&
     !!Object.keys(searchResults).length &&
     !clickOutside &&
     term;
 
+  const displayNotFound =
+    !debouncing &&
+    !searchQuery.isFetching &&
+    searchResults &&
+    !Object.keys(searchResults).length &&
+    !clickOutside &&
+    term;
+
   return (
     <form ref={searchRef} onSubmit={handleSubmit}>
       <div
@@ -114,6 +125,9 @@ export const SearchInput: React.FC<SearchInputProps> = function ({
             placeholder={`Search by Blob / KZG / Txn / Block / Slot / Address`}
           />
         </div>
+
+        {displayNotFound && <NotFound />}
+
         {displayResults && searchResults && (
           <div className="absolute inset-x-0 top-11 z-10 rounded-md border border-border-light dark:border-border-dark">
             <SearchResults
@@ -139,7 +153,7 @@ export const SearchInput: React.FC<SearchInputProps> = function ({
           ring-inset
           `}
           icon={
-            searchQuery.isFetching ? (
+            searchQuery.isFetching || debouncing ? (
               <Loading className="-ml-0.5 h-5 w-5 animate-spin" />
             ) : (
               <MagnifyingGlassIcon
@@ -154,3 +168,14 @@ export const SearchInput: React.FC<SearchInputProps> = function ({
     </form>
   );
 };
+
+function NotFound() {
+  return (
+    <div className="absolute top-11 z-10 w-full rounded-md border border-border-light bg-surface-light p-8 dark:border-border-dark dark:bg-surface-dark">
+      <div className="flex flex-col items-center justify-center gap-2">
+        <EmptyBox className="h-8 w-8" strokeWidth={1} />
+        <div className="text-sm font-medium">No results found</div>
+      </div>
+    </div>
+  );
+}