code splitting

package-lock.json

@@ -1841,6 +1841,15 @@
         }
       }
     },
+    "@loadable/component": {
+      "version": "5.10.3",
+      "resolved": "https://registry.npmjs.org/@loadable/component/-/component-5.10.3.tgz",
+      "integrity": "sha512-/aSO+tXw4vFMwZ6fgLaNQgLuEa7bgTpoBE4PxNzf08/ewAjymrCS3J7v3SbGE7IjGmmKL6vVwkpb7S3cYrk+ag==",
+      "requires": {
+        "@babel/runtime": "^7.6.0",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "@mapbox/hast-util-table-cell-style": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/@mapbox/hast-util-table-cell-style/-/hast-util-table-cell-style-0.1.3.tgz",
@@ -2382,6 +2391,15 @@
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.3.tgz",
       "integrity": "sha512-Il2DtDVRGDcqjDtE+rF8iqg1CArehSK84HZJCT7AMITlyXRBpuPhqGLDQMowraqqu1coEaimg4ZOqggt6L6L+A=="
     },
+    "@types/loadable__component": {
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/@types/loadable__component/-/loadable__component-5.10.0.tgz",
+      "integrity": "sha512-AaDP1VxV3p7CdPOtOTl3ALgQ6ES4AxJKO9UGj9vJonq/w2yERxwdzFiWNQFh9fEDXEzjxujBlM2RmSJtHV1/pA==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/lunr": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/@types/lunr/-/lunr-2.3.2.tgz",

package.json

@@ -29,6 +29,7 @@
     "not op_mini all"
   ],
   "dependencies": {
+    "@loadable/component": "^5.10.3",
     "classnames": "^2.2.6",
     "date-fns": "^2.8.1",
     "dms2dec": "^1.1.0",
@@ -92,6 +93,7 @@
     "@testing-library/react": "^9.3.2",
     "@types/classnames": "^2.2.9",
     "@types/jest": "^24.0.21",
+    "@types/loadable__component": "^5.10.0",
     "@types/lunr": "^2.3.2",
     "@types/node": "^12.12.11",
     "@types/react": "^16.9.11",

src/components/atoms/Copy.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
-import Clipboard from 'react-clipboard.js'
-
+import loadable from '@loadable/component'
 import styles from './Copy.module.scss'
 import Icon from './Icon'
 
+const Clipboard = loadable(() => import('react-clipboard.js'))
+
 const onCopySuccess = (e: any) => {
   e.trigger.classList.add(styles.copied)
 }

src/components/atoms/Time.tsx

@@ -1,15 +1,21 @@
 import React from 'react'
-import { format, formatDistance } from 'date-fns'
+import loadable from '@loadable/component'
+
+const LazyDate = loadable.lib(() => import('date-fns'))
 
 export default function Time({ date }: { date: string }) {
   const dateNew = new Date(date)
 
   return (
-    <time
-      title={format(dateNew, 'yyyy/MM/dd HH:mm')}
-      dateTime={dateNew.toISOString()}
-    >
-      {formatDistance(dateNew, Date.now(), { addSuffix: true })}
-    </time>
+    <LazyDate>
+      {({ format, formatDistance }) => (
+        <time
+          title={format(dateNew, 'yyyy/MM/dd HH:mm')}
+          dateTime={dateNew.toISOString()}
+        >
+          {formatDistance(dateNew, Date.now(), { addSuffix: true })}
+        </time>
+      )}
+    </LazyDate>
   )
 }

src/components/molecules/Search/SearchResultsEmpty.tsx

@@ -12,10 +12,8 @@ const SearchResultsEmpty = ({
   <div className={styles.empty}>
     <header className={styles.emptyMessage}>
       <p className={styles.emptyMessageText}>
-        {searchQuery.length > 1 && results.length === 0
+        {searchQuery.length > 0 && results.length === 0
           ? 'No results found'
-          : searchQuery.length === 1
-          ? 'Just one more character'
           : 'Awaiting your input'}
       </p>
     </header>

src/components/molecules/Search/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { Helmet } from 'react-helmet'
 import { CSSTransition } from 'react-transition-group'
 import SearchInput from './SearchInput'
@@ -7,30 +7,30 @@ import SearchResults from './SearchResults'
 
 import styles from './index.module.scss'
 
-function getSearchResults(query: string, lng: string) {
-  if (!query || !window.__LUNR__) return []
-  const lunrIndex = window.__LUNR__[lng]
-  const results = lunrIndex.index.search(query)
-  return results.map(({ ref }: { ref: string }) => lunrIndex.store[ref])
-}
-
-export default function Search({ lng }: { lng: string }) {
+export default function Search() {
   const [searchOpen, setSearchOpen] = useState(false)
   const [query, setQuery] = useState('')
   const [results, setResults] = useState([])
 
+  useEffect(() => {
+    if (!query || !window.__LUNR__) {
+      setResults([])
+      return
+    }
+
+    const lunrIndex = window.__LUNR__['en']
+    const searchResults = lunrIndex.index.search(query)
+    setResults(
+      searchResults.map(({ ref }) => {
+        return lunrIndex.store[ref]
+      })
+    )
+  }, [query])
+
   const toggleSearch = () => {
     setSearchOpen(!searchOpen)
   }
 
-  const search = (event: any) => {
-    const query = event.target.value
-    // wildcard search https://lunrjs.com/guides/searching.html#wildcards
-    const results = query.length > 1 ? getSearchResults(`${query}*`, lng) : []
-    setQuery(query)
-    setResults(results)
-  }
-
   return (
     <>
       <SearchButton onClick={toggleSearch} />
@@ -50,7 +50,7 @@ export default function Search({ lng }: { lng: string }) {
             <section className={styles.search}>
               <SearchInput
                 value={query}
-                onChange={(e: Event) => search(e)}
+                onChange={(e: any) => setQuery(e.target.value)}
                 onToggle={toggleSearch}
               />
             </section>

src/components/organisms/Header.tsx

@@ -20,7 +20,7 @@ export default class Header extends PureComponent {
             </h1>
 
             <nav role="navigation" className={styles.nav}>
-              <Search lng="en" />
+              <Search />
               <Menu />
             </nav>
           </div>