Improve search result display when you are still loading but have dat…

…a to show
xola · Dec 23, 2024 · 9ee8f43 · 9ee8f43
1 parent ec9969d
commit 9ee8f43
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 27 deletions.
diff --git a/src/components/Search.jsx b/src/components/Search.jsx
@@ -3,8 +3,8 @@ import { debounce } from "lodash-es";
 import PropTypes from "prop-types";
 import React, { useEffect, useId, useRef, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
-import cn from "../helpers/classnames";
 import { isOSX } from "../helpers/browser";
+import cn from "../helpers/classnames";
 import { useIsClient } from "../hooks/useIsClient";
 import { SearchIcon } from "../icons";
 import { Key } from "./Key";
@@ -135,6 +135,7 @@ export const Search = ({
     useHotkeys("esc", () => inputReference.current.blur(), { enableOnTags: ["INPUT"] });
 
     const isVisible = open || !shouldDestroyOnClose;
+    const hasResults = itemList.some((item) => Boolean(item.id));
 
     return (
         <div suppressHydrationWarning className="ui-search relative w-full">
@@ -182,33 +183,33 @@ export const Search = ({
             >
                 {isVisible
                     ? itemList.map((item, index) => (
-                          <li key={item} {...getItemProps({ key: index, item, index, className: "ui-search-item" })}>
-                              {item === submitValueItem ? (
-                                  isLoading ? (
-                                      <div className="p-3 text-center">
-                                          <Spinner size="small" />
-                                      </div>
-                                  ) : inputValue.length < minChars ? (
-                                      <div
-                                          className={cn(
-                                              "cursor-pointer p-2",
-                                              highlightedIndex === index ? "bg-blue-light text-white" : "",
-                                          )}
-                                      >
-                                          {`Enter at least ${minChars} characters to begin search`}
-                                      </div>
-                                  ) : null
-                              ) : (
-                                  children?.(item, highlightedIndex === index)
-                              )}
-                          </li>
-                      ))
+                        <li key={item?.id ?? index} {...getItemProps({ item, index, className: "ui-search-item" })}>
+                            {item === submitValueItem ? (
+                                isLoading ? (
+                                    <div className="p-3 text-center">
+                                        <Spinner size="small" />
+                                    </div>
+                                ) : inputValue.length < minChars ? (
+                                    <div
+                                        className={cn(
+                                            "cursor-pointer p-2",
+                                            highlightedIndex === index ? "bg-blue-light text-white" : "",
+                                        )}
+                                    >
+                                        {`Enter at least ${minChars} characters to begin search`}
+                                    </div>
+                                ) : null
+                            ) : (
+                                children?.(item, highlightedIndex === index)
+                            )}
+                        </li>
+                    ))
                     : null}
 
                 {isVisible && noResultFound ? <li className="cursor-not-allowed p-2">No results found</li> : null}
 
-                {isVisible && itemList.length < 5 ? (
-                    <li className="search-footer pointer-events sticky bottom-0 flex space-x-5 p-2 text-sm text-gray-dark">
+                {isVisible && hasResults && (
+                    <li className="bg-white search-footer pointer-events sticky bottom-0 items-center flex space-x-5 p-2 text-sm text-gray-dark">
                         <span className="flex items-center">
                             <Key char="up" className="mr-0.5" />
                             <Key char="down" className="mr-2" /> navigate results
@@ -221,8 +222,14 @@ export const Search = ({
                         <span className="flex items-center">
                             <Key char="esc" className="mr-2" /> close search
                         </span>
+
+                        {isLoading && (
+                            <span>
+                                <Spinner size="tiny" className="mr-1" /> Fetching {hasResults ? "more data" : "data"}
+                            </span>
+                        )}
                     </li>
-                ) : null}
+                )}
             </ul>
         </div>
     );

diff --git a/src/stories/Other/Search.stories.js b/src/stories/Other/Search.stories.js
@@ -14,8 +14,8 @@ const SearchStories = {
 };
 
 const fetchUsers = async (search) => {
-    const results = await fetch("https://xola.com/api/sellers", {
-        headers: { "X-API-KEY": "" }, // Some random dude's API key.
+    const results = await fetch("https://xola.com/api/sellers?limit=100", {
+        headers: { "X-API-KEY": "" }, // Put your API key here for testing
     });
 
     const response = await results.json();
@@ -53,6 +53,7 @@ export const Default = () => {
         >
             {(item, active) => (
                 <div
+                    key={item.id ?? item.email}
                     className={clsx(
                         "group flex cursor-pointer p-2",
                         active ? "bg-blue-light p-2 text-white" : "text-black",