chore: minor search improvements

package.json

@@ -20,6 +20,7 @@
     "@emotion/core": "10.0.28",
     "@emotion/styled": "10.0.27",
     "@emotion/styled-base": "10.0.31",
+    "@loadable/component": "5.13.1",
     "@mdx-js/loader": "1.6.14",
     "@mdx-js/mdx": "1.6.14",
     "@mdx-js/react": "1.6.14",

src/components/Loader/index.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { css } from '@emotion/core';
+
+const spinner = css`
+  width: 40px;
+  height: 40px;
+
+  position: relative;
+  margin: 0 auto;
+
+  .double-bounce1,
+  .double-bounce2 {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: #333;
+    opacity: 0.6;
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    -webkit-animation: sk-bounce 2s infinite ease-in-out;
+    animation: sk-bounce 2s infinite ease-in-out;
+  }
+
+  .double-bounce2 {
+    -webkit-animation-delay: -1s;
+    animation-delay: -1s;
+  }
+
+  @-webkit-keyframes sk-bounce {
+    0%,
+    100% {
+      -webkit-transform: scale(0);
+    }
+    50% {
+      -webkit-transform: scale(1);
+    }
+  }
+
+  @keyframes sk-bounce {
+    0%,
+    100% {
+      transform: scale(0);
+      -webkit-transform: scale(0);
+    }
+    50% {
+      transform: scale(1);
+      -webkit-transform: scale(1);
+    }
+  }
+`;
+
+export default ({ ...props }) => (
+  <div css={spinner} {...props}>
+    <div className={'double-bounce1'}></div>
+    <div className={'double-bounce2'}></div>
+  </div>
+);

src/components/Search/Sidebar.js

@@ -1,14 +1,16 @@
 /* eslint-disable react/display-name */
-import Algolia from './algolia/index';
 import styled from '@emotion/styled';
 import React, { useRef } from 'react';
 import config from 'config';
 import VisibilitySensor from 'react-visibility-sensor';
 import { X } from 'react-feather';
+import loadable from '@loadable/component';
 
 import { onMobile } from '../../styles/responsive';
 import { visibleMobile, shadowAround } from '../../styles';
 
+const Algolia = loadable(() => import('./algolia/'))
+
 const SearchWrapper = styled.div`
   display: flex;
   flex-direction: column;
@@ -43,6 +45,8 @@ width: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
+cursor: pointer;
+box-shadow: 0 3px 8px 0 ${(props) => props.theme.colors.shadow};
 border-bottom: 1px solid ${(props) => props.theme.colors.border};
 svg {
   width: 1.2em;
@@ -72,7 +76,7 @@ const Search = React.forwardRef(({ onVisibleChange, closeSelf, ...props }, ref)
       <SearchWrapper {...props}>
         <CloseSearch css={visibleMobile} onClick={closeSelf}>
           <X />
-          <span css={{marginLeft: '5px'}}>Close Search</span>
+          <span css={{marginLeft: '5px'}}>Close</span>
         </CloseSearch>
         <VisibilitySensor onChange={onVisibilityChange}>
           <Algolia ref={searchRef} inputRef={inputRef} index={config.features.search.indexName} />

src/components/Search/Status.js

@@ -2,6 +2,7 @@ import React from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { marginLeftRight } from './styles';
+import Loading from '../Loader';
 
 const queryToken = css`
   font-weight: bold;
@@ -18,63 +19,6 @@ const StatusWrapper = styled.div`
   }
 `;
 
-const spinner = css`
-  width: 40px;
-  height: 40px;
-
-  position: relative;
-  margin: 0 auto;
-
-  .double-bounce1,
-  .double-bounce2 {
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    background-color: #333;
-    opacity: 0.6;
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    -webkit-animation: sk-bounce 2s infinite ease-in-out;
-    animation: sk-bounce 2s infinite ease-in-out;
-  }
-
-  .double-bounce2 {
-    -webkit-animation-delay: -1s;
-    animation-delay: -1s;
-  }
-
-  @-webkit-keyframes sk-bounce {
-    0%,
-    100% {
-      -webkit-transform: scale(0);
-    }
-    50% {
-      -webkit-transform: scale(1);
-    }
-  }
-
-  @keyframes sk-bounce {
-    0%,
-    100% {
-      transform: scale(0);
-      -webkit-transform: scale(0);
-    }
-    50% {
-      transform: scale(1);
-      -webkit-transform: scale(1);
-    }
-  }
-`;
-
-const Loading = ({ ...props }) => (
-  <div css={spinner} {...props}>
-    <div className={'double-bounce1'}></div>
-    <div className={'double-bounce2'}></div>
-  </div>
-);
-
 const SearchStatus = ({ searching, noHits, query }) => {
   let text = '';
   if (searching) {