feat(website): improve search UX (pmndrs#1325)

* feat(website): improve search UX * fix(website): reset query on search modal close * fix(website): revise throttle
grzesiek-ds · Aug 3, 2022 · 32cace9 · 32cace9
1 parent 7510222
commit 32cace9
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 35 deletions.
diff --git a/website/package.json b/website/package.json
@@ -29,8 +29,8 @@
     "gatsby-plugin-use-dark-mode": "^1.5.0",
     "gatsby-source-filesystem": "^4.17.0",
     "jotai": "^1.7.0",
-    "just-debounce-it": "^3.0.1",
     "just-kebab-case": "^4.0.3",
+    "just-throttle": "^4.0.1",
     "prism-react-renderer": "^1.3.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/website/src/components/meta.js b/website/src/components/meta.js
@@ -34,8 +34,8 @@ export const Meta = ({ lang = 'en', title, description, uri }) => {
       <link rel="icon" type="image/svg+xml" href={siteIcon} />
       <link rel="canonical" href={pageUrl} />
       <link rel="dns-prefetch" href="appid-dsn.algolia.net" />
-      <link rel="preconnect" href="https://98qz5x9lgr-dsn.algolia.net" crossOrigin />
-      <link rel="preconnect" href="https://storage.googleapis.com" crossOrigin />
+      <link rel="preconnect" href="https://98qz5x9lgr-dsn.algolia.net" crossOrigin="true" />
+      <link rel="preconnect" href="https://storage.googleapis.com" crossOrigin="true" />
     </>
   );
 };

diff --git a/website/src/components/modal.js b/website/src/components/modal.js
@@ -6,11 +6,7 @@ export const Modal = ({ isOpen, onOpenChange, children, ...rest }) => (
       <div className="z-100 fixed top-0 right-0 bottom-0 h-full w-8 bg-white dark:bg-gray-950" />
       <Dialog.Overlay className="fixed inset-0 z-[1000] flex justify-center bg-black/50 p-8 backdrop-blur sm:p-12 lg:p-32">
         <div className="w-full max-w-3xl">
-          <Dialog.Content className="z-[1001] min-w-full">
-            <div className="overflow-hidden rounded-lg bg-white shadow-xl dark:bg-gray-950 dark:!shadow-none">
-              {children}
-            </div>
-          </Dialog.Content>
+          <Dialog.Content className="z-[1001] min-w-full">{children}</Dialog.Content>
         </div>
       </Dialog.Overlay>
     </Dialog.Portal>

diff --git a/website/src/components/search-modal.js b/website/src/components/search-modal.js
@@ -1,8 +1,9 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import algoliasearch from 'algoliasearch/lite';
+import cx from 'classnames';
 import { Link } from 'gatsby';
-import { atom, useAtom, useSetAtom } from 'jotai';
-import debounce from 'just-debounce-it';
+import { useAtom, useSetAtom } from 'jotai';
+import throttle from 'just-throttle';
 import { Hits, InstantSearch, useInstantSearch, useSearchBox } from 'react-instantsearch-hooks-web';
 import { searchAtom } from '../atoms';
 import { Button, Icon, Modal } from '../components';
@@ -18,12 +19,13 @@ export const SearchModal = () => {
   return (
     <Modal isOpen={isSearchOpen} onOpenChange={setIsSearchOpen}>
       <InstantSearch searchClient={searchClient} indexName="Docs">
-        <div className="p-8">
-          <CustomSearchBox />
-        </div>
+        <CustomSearchBox />
         <Boundary fallback={null}>
-          <div className="-my-8 p-8">
-            <Hits hitComponent={Hit} className="max-h-[400px] overflow-y-scroll" />
+          <div className="overflow-hidden rounded-b-lg">
+            <Hits
+              hitComponent={Hit}
+              className="max-h-[400px] overflow-y-scroll border-l border-r border-b border-gray-300 bg-white p-8 pb-0 dark:border-gray-800 dark:bg-gray-950"
+            />
           </div>
         </Boundary>
       </InstantSearch>
@@ -50,7 +52,7 @@ const Boundary = ({ children, fallback }) => {
 
   if (results.nbHits === 0) {
     return (
-      <div className="-mt-8 flex items-center space-x-3 p-8">
+      <div className="flex items-center space-x-3 rounded-b-lg border-l border-r border-b border-gray-300 bg-white p-8 dark:border-gray-800 dark:bg-gray-950">
         <div>
           <Icon icon="warning" className="h-6 w-6 fill-current text-red-400" />
         </div>
@@ -64,22 +66,23 @@ const Boundary = ({ children, fallback }) => {
   return children;
 };
 
-const queryAtom = atom('');
-
 const CustomSearchBox = (props) => {
-  const [query, setQuery] = useAtom(queryAtom);
+  const [query, setQuery] = useState('');
 
   const { refine } = useSearchBox(props);
 
-  const debouncedRefine = useMemo(() => debounce((value) => refine(value), 200), [refine]);
+  const throttledRefine = useMemo(
+    () => throttle((value) => refine(value), 200, { leading: true, trailing: true }),
+    [refine],
+  );
 
   const onChange = useCallback(
     (event) => {
       const newQuery = event.currentTarget.value;
       setQuery(newQuery);
-      debouncedRefine(newQuery);
+      throttledRefine(newQuery);
     },
-    [debouncedRefine, setQuery],
+    [throttledRefine],
   );
 
   return (
@@ -89,14 +92,20 @@ const CustomSearchBox = (props) => {
         placeholder="Search here..."
         value={query}
         onChange={onChange}
-        className="flex w-full items-center rounded-lg border border-gray-300 bg-white px-4 py-2 text-lg text-black ring-0 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-200"
-      />
-      <img
-        src="/search-by-algolia.svg"
-        alt="Search by Algolia"
-        className="pointer-events-none absolute right-4 z-10 block"
-        aria-hidden
+        autoFocus
+        className={cx(
+          query.length === 0 ? 'rounded-lg' : 'rounded-t-lg',
+          'dark:focus-border-gray-800 flex w-full items-center border border-gray-300 bg-white px-6 py-3 text-lg text-black ring-0 focus:border-gray-300 focus:ring-0 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-200',
+        )}
       />
+      <a
+        href="https://algolia.com"
+        target="_blank"
+        rel="noreferrer"
+        className="absolute right-4 z-10 block"
+      >
+        <img src="/search-by-algolia.svg" alt="Search by Algolia" aria-hidden />
+      </a>
     </div>
   );
 };

diff --git a/website/yarn.lock b/website/yarn.lock
@@ -8217,16 +8217,16 @@ jsonfile@^6.0.1:
     array-includes "^3.1.5"
     object.assign "^4.1.2"
 
-just-debounce-it@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/just-debounce-it/-/just-debounce-it-3.0.1.tgz#8c8a4c9327c9523366ec79ac9a959a938153bd2f"
-  integrity sha512-6EQWOpRV8fm/ame6XvGBSxvsjoMbqj7JS9TV/4Q9aOXt9DQw22GBfTGP6gTAqcBNN/PbzlwtwH7jtM0k9oe9pg==
-
 just-kebab-case@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/just-kebab-case/-/just-kebab-case-4.0.3.tgz#e69186bc9de484372c6831eb8a3fafdc8cb8b189"
   integrity sha512-T1afsOXLXs1ezkWq02qrJwJLh6eib5ISr8/jkh56k5YnDhDuOvyd++QlMO9YUofwVbAi9JRTEms2yTs+WZ8TLQ==
 
+just-throttle@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/just-throttle/-/just-throttle-4.0.1.tgz#10132a9ca787e248e744f8e96c595596b14e86b7"
+  integrity sha512-BC3LgilNVj4WQt2vj4//4n/UHSQtkl5P5fz+aOZ+c0t1sjIzBeIFL2+5T32MhTs4YrKjAgNo2DT/VRh/NwQOZA==
+
 keyv@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/keyv/-/keyv-3.1.0.tgz#ecc228486f69991e49e9476485a5be1e8fc5c4d9"