From 36010ef98dbd5057c55c3b8914c54d5064a19811 Mon Sep 17 00:00:00 2001 From: xHomu Date: Tue, 26 Nov 2024 16:48:07 -0800 Subject: [PATCH] treeshake InstantSearch to reduce initial js size --- app/routes/_site+/_components/SiteHeader.tsx | 8 +-- app/routes/_site+/search/SiteSearch.tsx | 59 +++++++++++++++++++ app/routes/_site+/search/SiteSearchOn.tsx | 14 +++++ .../_site+/search/components/Autocomplete.tsx | 2 +- 4 files changed, 76 insertions(+), 7 deletions(-) create mode 100644 app/routes/_site+/search/SiteSearch.tsx create mode 100644 app/routes/_site+/search/SiteSearchOn.tsx diff --git a/app/routes/_site+/_components/SiteHeader.tsx b/app/routes/_site+/_components/SiteHeader.tsx index 64a534bc..7a4343bc 100644 --- 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({
- - - +
+ + ); +} diff --git a/app/routes/_site+/search/SiteSearchOn.tsx b/app/routes/_site+/search/SiteSearchOn.tsx new file mode 100644 index 00000000..d047607d --- /dev/null +++ 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 ( + + + + ); +} diff --git a/app/routes/_site+/search/components/Autocomplete.tsx b/app/routes/_site+/search/components/Autocomplete.tsx index 21dcc5d2..4ed189f0 100644 --- 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: {