Refactor web search index

web/.gitignore

@@ -42,3 +42,6 @@ yarn-error.log*
 
 # Cypress videos
 cypress/videos
+
+# Fuse.js index (we generate this on the fly)
+public/static/fuse-index.json

web/components/Header.tsx

@@ -3,17 +3,14 @@ import { useRouter } from 'next/router'
 import GitHub from './GitHub'
 import ThemeSwitcher from './ThemeSwitcher'
 
+import * as React from 'react'
+import Search from './Search'
+
 type HeaderProps = {
   name: string
   setDarkMode: (state: boolean) => void
-  searchIndex: SearchIndex
 }
 
-import * as React from 'react'
-import Search from './Search'
-import { SearchIndex, SearchItem } from '../utils/search'
-import Fuse, { IFuseOptions } from 'fuse.js'
-
 interface NavLinkProps {
   href: string
   name: string
@@ -34,20 +31,8 @@ const NavLink: React.FunctionComponent<NavLinkProps> = (props) => {
   )
 }
 
-export default function Header({
-  name,
-  setDarkMode,
-  searchIndex,
-}: HeaderProps) {
+export default function Header({ name, setDarkMode }: HeaderProps) {
   const router = useRouter()
-  const fuse = React.useMemo(() => {
-    const options: IFuseOptions<SearchItem> = {}
-    return new Fuse(
-      searchIndex.list,
-      options,
-      Fuse.parseIndex(searchIndex.index)
-    )
-  }, [searchIndex])
 
   return (
     <div className="border-b-1 backdrop-blur-lg bg-white dark:bg-black bg-opacity-20 dark:bg-opacity-20 transition">
@@ -65,7 +50,7 @@ export default function Header({
           </div>
         )}
         <div className="flex-grow" />
-        <Search fuse={fuse} />
+        <Search />
         <div className="flex">
           <div className="border-r mx-1 px-1 border-slate-700">
             <a href="https://github.com/brndnmtthws/conky">

web/components/Layout.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react'
-import { SearchIndex } from '../utils/search'
 import Footer from './Footer'
 import Header from './Header'
 
@@ -17,10 +16,9 @@ function darkModeDefault() {
 
 interface LayoutProps {
   children: React.ReactNode
-  searchIndex: SearchIndex
 }
 
-export default function Layout({ children, searchIndex }: LayoutProps) {
+export default function Layout({ children }: LayoutProps) {
   const [darkMode, setDarkMode] = useState(darkModeDefault())
 
   useEffect(() => {
@@ -48,11 +46,7 @@ export default function Layout({ children, searchIndex }: LayoutProps) {
   return (
     <div>
       <div className="sticky top-0 z-10 h-16">
-        <Header
-          searchIndex={searchIndex}
-          name="Conky"
-          setDarkMode={setDarkMode}
-        />
+        <Header name="Conky" setDarkMode={setDarkMode} />
       </div>
       <div className="relative pb-4">
         <div className="flex flex-col items-center max-w-3xl w-full mx-auto">

web/components/Search.tsx

@@ -1,13 +1,11 @@
 import Fuse, { FuseResult } from 'fuse.js'
 import React, { Fragment, useCallback, useEffect, useState } from 'react'
 import { Search as SearchIcon } from 'react-feather'
-import { SearchItem } from '../utils/search'
+import { SearchIndex, SearchItem } from '../utils/search'
 import { Dialog, Transition, Combobox } from '@headlessui/react'
 import { useRouter } from 'next/router'
 
-export interface SearchProps {
-  fuse: Fuse<SearchItem>
-}
+export interface SearchProps {}
 
 interface SearchResultProps {
   result: FuseResult<SearchItem>
@@ -57,12 +55,25 @@ const SearchResult: React.FunctionComponent<SearchResultProps> = (props) => {
   )
 }
 
-const Search: React.FunctionComponent<SearchProps> = ({ fuse }) => {
+const Search: React.FunctionComponent<SearchProps> = () => {
   const router = useRouter()
   const [searchText, setSearchText] = useState('')
   const [searchResults, setSearchResults] = useState<FuseResult<SearchItem>[]>(
     []
   )
+  const [fuse, setFuse] = React.useState<Fuse<SearchItem> | undefined>(
+    undefined
+  )
+  const fusePromise = async () => {
+    const data = await fetch('/static/fuse-index.json')
+    console.log(data)
+    const searchIndex: SearchIndex = await data.json()
+    console.log(searchIndex)
+    return new Fuse(searchIndex.list, {}, Fuse.parseIndex(searchIndex.index))
+  }
+  React.useEffect(() => {
+    fusePromise().then((fuse) => setFuse(fuse))
+  }, [])
 
   const [isOpen, setIsOpen] = useState(false)
   const handleKeyPress = useCallback(
@@ -89,6 +100,14 @@ const Search: React.FunctionComponent<SearchProps> = ({ fuse }) => {
     }
   }, [handleKeyPress])
 
+  if (!fuse) {
+    return (
+      <div className="flex items-center ml-2">
+        <SearchIcon size={32} />
+      </div>
+    )
+  }
+
   const setSearch = (value: string) => {
     setSearchText(value)
     const searchResult = fuse.search(value)