Merge pull request #178 from primer/mkt/search-in-bg

Perform seach in the background

Author: Michelle Tilley

theme/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/gatsby-theme-doctocat",
-  "version": "0.24.1",
+  "version": "0.25.0",
   "main": "index.js",
   "license": "MIT",
   "scripts": {
@@ -9,7 +9,8 @@
   "devDependencies": {
     "gatsby": "^2.24.52",
     "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react-dom": "^16.13.1",
+    "worker-loader": "^3.0.2"
   },
   "peerDependencies": {
     "gatsby": "2.x",

theme/src/search.worker.js

@@ -0,0 +1,32 @@
+import Fuse from 'fuse.js'
+import debounce from 'lodash.debounce'
+
+(function searchWorker() {
+  let fuse = null
+
+  // [MKT]: I landed on the debouce wait value of 50 based mostly on
+  // experimentation. With both `leading` and `trailing` set to `true`, this
+  // feels pretty snappy.
+  //
+  // From https://lodash.com/docs/#debounce:
+  //
+  // > Note: If `leading` and `trailing` options are `true`, `func` is invoked
+  // > on the trailing edge of the timeout only if the debounced function is
+  // > invoked more than once during the wait timeout.
+  const performSearch = debounce(function performSearch(query) {
+    const results = fuse.search(query).slice(0, 20)
+    postMessage({results: results, query: query})
+  }, 50, {leading: true, trailing: true})
+
+  onmessage = function({data}) {
+    if (data.list) {
+      fuse = new Fuse(data.list, {
+        threshold: 0.2,
+        keys: ['title', 'rawBody'],
+        tokenize: true,
+      })
+    } else if (data.query) {
+      performSearch(data.query)
+    }
+  }
+})()

theme/src/use-search.js

@@ -1,9 +1,12 @@
-import Fuse from 'fuse.js'
 import {graphql, useStaticQuery} from 'gatsby'
 import path from 'path'
 import React from 'react'
+import SearchWorker from 'worker-loader!./search.worker.js'
 
 function useSearch(query) {
+  const latestQuery = React.useRef(query)
+  const workerRef = React.useRef()
+
   const data = useStaticQuery(graphql`
     {
       allMdx {
@@ -37,25 +40,33 @@ function useSearch(query) {
     [data],
   )
 
-  const fuse = React.useMemo(
-    () =>
-      new Fuse(list, {
-        threshold: 0.2,
-        keys: ['title', 'rawBody'],
-        tokenize: true,
-      }),
-    [list],
-  )
-
   const [results, setResults] = React.useState(list)
 
+  const handleSearchResults = React.useCallback(({data}) => {
+    if (data.query && data.results && data.query === latestQuery.current) {
+      setResults(data.results)
+    }
+  }, [])
+
+  React.useEffect(() => {
+    const worker = new SearchWorker()
+    worker.addEventListener('message', handleSearchResults)
+    worker.postMessage({list})
+    workerRef.current = worker
+
+    return () => {
+      workerRef.current.terminate()
+    }
+  }, [list, handleSearchResults])
+
   React.useEffect(() => {
-    if (query) {
-      setResults(fuse.search(query).slice(0, 20)) // Return top 20 results
+    latestQuery.current = query
+    if (query && workerRef.current) {
+      workerRef.current.postMessage({query: query})
     } else {
       setResults(list)
     }
-  }, [query, fuse, list])
+  }, [query, list])
 
   return results
 }

yarn.lock

@@ -2093,6 +2093,11 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.5.tgz#dcce4430e64b443ba8945f0290fb564ad5bac6dd"
   integrity sha512-7+2BITlgjgDhH0vvwZU/HZJVyk+2XUlvxXe8dFMedNX/aMkaOq++rMAFXc0tM7ij15QaWlbdQASBR9dihi+bDQ==
 
+"@types/json-schema@^7.0.5":
+  version "7.0.6"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.6.tgz#f4c7ec43e81b319a9815115031709f26987891f0"
+  integrity sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==
+
 "@types/json5@^0.0.29":
   version "0.0.29"
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
@@ -2604,12 +2609,12 @@ ajv-errors@^1.0.0:
   resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.1.tgz#f35986aceb91afadec4102fbd85014950cefa64d"
   integrity sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==
 
-ajv-keywords@^3.1.0, ajv-keywords@^3.4.1:
+ajv-keywords@^3.1.0, ajv-keywords@^3.4.1, ajv-keywords@^3.5.2:
   version "3.5.2"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
   integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
 
-ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.2, ajv@^6.12.3:
+ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.2, ajv@^6.12.3, ajv@^6.12.4:
   version "6.12.4"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.4.tgz#0614facc4522127fa713445c6bfd3ebd376e2234"
   integrity sha512-eienB2c9qVQs2KWexhkrdMLVDoIQCz5KSeLxwg9Lzk4DOfBtIK9PQwwufcsn1jjGuf9WZmqPMbGxOzfcuphJCQ==
@@ -9589,6 +9594,15 @@ loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2
     emojis-list "^3.0.0"
     json5 "^1.0.1"
 
+loader-utils@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.0.tgz#e4cace5b816d425a166b5f097e10cd12b36064b0"
+  integrity sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^2.1.2"
+
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@@ -13353,6 +13367,15 @@ schema-utils@^2.6.5:
     ajv "^6.12.2"
     ajv-keywords "^3.4.1"
 
+schema-utils@^2.7.0:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"
+  integrity sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==
+  dependencies:
+    "@types/json-schema" "^7.0.5"
+    ajv "^6.12.4"
+    ajv-keywords "^3.5.2"
+
 scss-tokenizer@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"
@@ -15831,6 +15854,14 @@ worker-farm@^1.7.0:
   dependencies:
     errno "~0.1.7"
 
+worker-loader@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/worker-loader/-/worker-loader-3.0.2.tgz#f82386a96366d24dbf6c2420f5bed04d3fe5a229"
+  integrity sha512-a3Hk9/3OCKkiK00gRIenNd4pdwBQn2Hu2L39WPGqR5WlX90u++mAVK7K1i6zUQyio4zqpnaastJ7J0xCBaA3VA==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^2.7.0"
+
 wrap-ansi@^5.0.0, wrap-ansi@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-5.1.0.tgz#1fd1f67235d5b6d0fee781056001bfb694c03b09"