treeshake InstantSearch to reduce initial js size

manawiki · Nov 27, 2024 · 36010ef · 36010ef
1 parent 7c7298b
commit 36010ef
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 7 deletions.
diff --git a/app/routes/_site+/_components/SiteHeader.tsx b/app/routes/_site+/_components/SiteHeader.tsx
@@ -8,7 +8,6 @@ import {
    Transition,
 } from "@headlessui/react";
 import { Link, useFetcher, useLoaderData } from "@remix-run/react";
-import { InstantSearch } from "react-instantsearch";
 
 import { DotLoader } from "~/components/DotLoader";
 import { Icon } from "~/components/Icon";
@@ -23,8 +22,7 @@ import { isAdding } from "~/utils/form";
 
 import { MenuTrayContent, MobileTray } from "./MobileTray";
 import { DarkModeToggle } from "../action+/theme-toggle";
-import { searchClient } from "../search/_search";
-import { Autocomplete } from "../search/components/Autocomplete";
+import { SiteSearch } from "../search/SiteSearch";
 
 export function SiteHeader({
    setPrimaryMenuOpen,
@@ -245,9 +243,7 @@ export function SiteHeader({
                         <DarkModeToggle className="size-5" />
                      </div>
                      <div className="flex items-center justify-center gap-2 hover:border-zinc-400 shadow-sm bg-zinc-100 dark:bg-dark500 border border-zinc-300 dark:border-zinc-500 dark:hover:border-zinc-400 rounded-full size-10">
-                        <InstantSearch searchClient={searchClient}>
-                           <Autocomplete site={site} />
-                        </InstantSearch>
+                        <SiteSearch site={site} />
                      </div>
                      <button
                         className="dark:bg-zinc-600 shadow-1 flex size-10 items-center 

diff --git a/app/routes/_site+/search/SiteSearch.tsx b/app/routes/_site+/search/SiteSearch.tsx
@@ -0,0 +1,59 @@
+import { Suspense, useState } from "react";
+
+import { lazily } from "react-lazily";
+
+import type { Site } from "payload/generated-types";
+
+//@ts-ignore
+const { SiteSearchOn } = lazily(() => import("./SiteSearchOn"));
+
+export function SiteSearch({ site }: { site: Site }) {
+   const [searchOn, setSearchOn] = useState(false);
+
+   return searchOn ? (
+      <Suspense fallback={<SiteSearchOff setSearchOn={setSearchOn} />}>
+         <SiteSearchOn site={site} />
+      </Suspense>
+   ) : (
+      <SiteSearchOff setSearchOn={setSearchOn} />
+   );
+}
+
+export function SiteSearchOff({
+   setSearchOn,
+}: {
+   setSearchOn: (value: boolean) => void;
+}) {
+   return (
+      <div
+         className="aa-Autocomplete"
+         aria-expanded="false"
+         aria-haspopup="listbox"
+         aria-labelledby="autocomplete-0-label"
+      >
+         <button
+            type="button"
+            className="aa-DetachedSearchButton flex items-center justify-center gap-2 hover:border-zinc-400 shadow-sm bg-zinc-100 dark:bg-dark500 border border-zinc-300 dark:border-zinc-500 dark:hover:border-zinc-400 rounded-full p-1 size-10"
+            title="Search"
+            id="autocomplete-0-label"
+            onClick={() => setSearchOn(true)}
+         >
+            <div className="aa-DetachedSearchButtonIcon">
+               <svg
+                  className="aa-SubmitIcon"
+                  viewBox="0 0 24 24"
+                  width="20"
+                  height="20"
+                  fill="currentColor"
+               >
+                  <path d="M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z"></path>
+               </svg>
+            </div>
+            <div className="aa-DetachedSearchButtonPlaceholder hidden">
+               Search...
+            </div>
+            <div className="aa-DetachedSearchButtonQuery hidden"></div>
+         </button>
+      </div>
+   );
+}
diff --git a/app/routes/_site+/search/SiteSearchOn.tsx b/app/routes/_site+/search/SiteSearchOn.tsx
@@ -0,0 +1,14 @@
+import { InstantSearch } from "react-instantsearch";
+
+import type { Site } from "payload/generated-types";
+
+import { searchClient } from "./_search";
+import { Autocomplete } from "./components/Autocomplete";
+
+export function SiteSearchOn({ site }: { site: Site }) {
+   return (
+      <InstantSearch searchClient={searchClient}>
+         <Autocomplete site={site} />
+      </InstantSearch>
+   );
+}
diff --git a/app/routes/_site+/search/components/Autocomplete.tsx b/app/routes/_site+/search/components/Autocomplete.tsx
@@ -77,7 +77,7 @@ export function Autocomplete({
          ...autocompleteProps,
          detachedMediaQuery: "",
          container: autocompleteContainer.current,
-         initialState: { query },
+         initialState: { query, isOpen: true },
          autoFocus: true,
          placeholder: "Search...",
          classNames: {