Merge pull request #3 from mikefrancis/debounced-search

Debounce search input

Author: lukewhitehouse

package.json

@@ -26,6 +26,7 @@
     "gatsby-source-filesystem": "^2.0.32",
     "gatsby-transformer-remark": "^2.3.12",
     "gatsby-transformer-sharp": "^2.1.18",
+    "lodash.debounce": "^4.0.8",
     "prismjs": "^1.16.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",

src/pages/search.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react"
+import debounce from "lodash.debounce"
 import Layout from "../components/layout"
 import SearchForm from "../components/searchForm"
 import SearchResults from "../components/searchResults"
@@ -9,12 +10,17 @@ const Search = ({ data, location }) => {
 
   useEffect(() => {
     if (searchQuery && window.__LUNR__) {
-      window.__LUNR__.__loaded.then(lunr => {
+      const debouncedSearch = debounce(async () => {
+        const lunr = await window.__LUNR__.__loaded
         const refs = lunr.en.index.search(searchQuery)
         const posts = refs.map(({ ref }) => lunr.en.store[ref])
+
         setResults(posts)
-      })
+      }, 500)
+
+      debouncedSearch()
     }
+
     if (!searchQuery) setResults([])
   }, [location.search])
 

yarn.lock

@@ -6945,6 +6945,11 @@ lodash.clonedeep@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
   integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=
 
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
+
 lodash.escaperegexp@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.escaperegexp/-/lodash.escaperegexp-4.1.2.tgz#64762c48618082518ac3df4ccf5d5886dae20347"