refactor: add loading ux to search results page

src/app/search/layout.tsx

@@ -0,0 +1,10 @@
+import { PillarRoutesContextProvider } from '@/search/state/contexts/pillar-routes-context';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+const Layout = ({ children }: Props) => {
+  return <PillarRoutesContextProvider>{children}</PillarRoutesContextProvider>;
+};
+export default Layout;

src/search/components/pillar-items-dropdown-content.tsx

@@ -32,7 +32,7 @@ import { getPillarItems } from '@/search/data/get-pillar-items';
 import { usePillarRoutesContext } from '@/search/state/contexts/pillar-routes-context';
 
 const ITEMS_PER_PAGE = 20;
-const DEBOUNCE_DELAY = 300;
+const DEBOUNCE_DELAY = 500;
 
 interface Props {
   nav: string;

src/search/components/plain-search-input.tsx

@@ -4,14 +4,18 @@ import { useEffect, useRef } from 'react';
 
 import { Button } from '@nextui-org/button';
 import { Input } from '@nextui-org/input';
+import { Spinner } from '@nextui-org/spinner';
 
 import { CloseIcon } from '@/shared/components/icons/close-icon';
 import { SearchIcon } from '@/shared/components/icons/sidebar-search-icon';
 
 import { useSearchInput } from '@/search/hooks/use-search-input';
 
+import { usePillarRoutesContext } from '@/search/state/contexts/pillar-routes-context';
+
 export const PlainSearchInput = () => {
   const { value, onChange, onClear } = useSearchInput();
+  const { isPendingPillarRoute } = usePillarRoutesContext();
 
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -30,23 +34,27 @@ export const PlainSearchInput = () => {
           <SearchIcon />
         </div>
       }
-      endContent={
-        value ? (
-          <Button
-            isIconOnly
-            size="sm"
-            onClick={onClear}
-            variant="light"
-            className="bg-white/5"
-          >
-            <CloseIcon />
-          </Button>
-        ) : null
-      }
       radius="sm"
       classNames={{
         input: 'focus:ring-red-500 focus:border-red-500',
       }}
+      endContent={
+        <>
+          {isPendingPillarRoute && <Spinner size="sm" color="white" />}
+          {value && (
+            <Button
+              isIconOnly
+              size="sm"
+              onClick={onClear}
+              variant="light"
+              className="bg-white/5"
+            >
+              <CloseIcon />
+            </Button>
+          )}
+        </>
+      }
+      isDisabled={isPendingPillarRoute}
       value={value}
       onChange={onChange}
     />

src/search/components/search-result-item.tsx

@@ -1,13 +1,16 @@
 'use client';
 
 import Link from 'next/link';
+import { useRouter } from 'next/navigation';
 
 import { Button } from '@nextui-org/button';
 
 import { ExternalIcon } from '@/shared/components/icons/external-icon';
 
 import { TSearchResultItem } from '@/search/core/schemas';
 
+import { usePillarRoutesContext } from '@/search/state/contexts/pillar-routes-context';
+
 const escapeRegExp = (str: string): string =>
   str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 
@@ -38,13 +41,22 @@ interface Props extends TSearchResultItem {
 }
 
 export const SearchResultItem = ({ label, href, query }: Props) => {
+  const router = useRouter();
+  const { isPendingPillarRoute, startTransition } = usePillarRoutesContext();
+  const onClick = () => {
+    startTransition(() => {
+      router.push(href);
+    });
+  };
   return (
     <Button
       as={Link}
       href={href}
       size="sm"
       className=""
+      isDisabled={isPendingPillarRoute}
       endContent={<ExternalIcon />}
+      onClick={onClick}
     >
       <span className="text-13">{highlightText(label, query)}</span>
     </Button>