feat: loading indicator

.travis.yml

@@ -9,7 +9,7 @@ addons:
 before_install:
   - export DISPLAY=:99.0
   - sh -e /etc/init.d/xvfb start
-  - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.2.0
+  - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.3.2
   - export PATH=$HOME/.yarn/bin:$PATH
 cache:
   yarn: true

package.json

@@ -133,7 +133,7 @@
   },
   "engines": {
     "node": "8.6.0",
-    "yarn": "1.2.0"
+    "yarn": "1.3.2"
   },
   "jest": {
     "notify": false,

packages/react-instantsearch-theme-algolia/styles/_SearchBox.scss

@@ -22,3 +22,34 @@ $main-searchbox-config: (
 .ais-SearchBox {
   @include searchbox($main-searchbox-config...);
 }
+
+.ais-SearchBox__loading-indicator {
+  position: absolute;
+  top: 0;
+  right: inherit;
+  left: 0;
+  margin: 0;
+  border: 0;
+  border-radius: 4px 0 0 4px;
+  background-color: rgba(255, 255, 255, 0);
+  padding: 0;
+  width: 46px;
+  height: 100%;
+  vertical-align: middle;
+  text-align: center;
+  font-size: inherit;
+}
+
+.ais-SearchBox__loading-indicator::before {
+  display: inline-block;
+  margin-right: -4px;
+  height: 100%;
+  vertical-align: middle;
+  content: '';
+}
+
+.ais-SearchBox__loading-indicator > svg {
+  height: 1.3em;
+  width: 1.3em;
+  margin-top: 1em;
+}

packages/react-instantsearch/src/components/SearchBox.js

@@ -5,12 +5,51 @@ import classNames from './classNames.js';
 
 const cx = classNames('SearchBox');
 
+const DefaultLoadingIndicator = () => (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 38 38"
+    xmlns="http://www.w3.org/2000/svg"
+    stroke="#BFC7D8"
+  >
+    <g fill="none" fillRule="evenodd">
+      <g transform="translate(1 1)" strokeWidth="2">
+        <circle strokeOpacity=".5" cx="18" cy="18" r="18" />
+        <path d="M36 18c0-9.94-8.06-18-18-18">
+          <animateTransform
+            attributeName="transform"
+            type="rotate"
+            from="0 18 18"
+            to="360 18 18"
+            dur="1s"
+            repeatCount="indefinite"
+          />
+        </path>
+      </g>
+    </g>
+  </svg>
+);
+
+const DefaultReset = () => (
+  <svg role="img" width="1em" height="1em">
+    <use xlinkHref="#sbx-icon-clear-3" />
+  </svg>
+);
+
+const DefaultSubmit = () => (
+  <svg role="img" width="1em" height="1em">
+    <use xlinkHref="#sbx-icon-search-13" />
+  </svg>
+);
+
 class SearchBox extends Component {
   static propTypes = {
     currentRefinement: PropTypes.string,
     refine: PropTypes.func.isRequired,
     translate: PropTypes.func.isRequired,
 
+    loadingIndicatorComponent: PropTypes.element,
     resetComponent: PropTypes.element,
     submitComponent: PropTypes.element,
 
@@ -25,6 +64,9 @@ class SearchBox extends Component {
     onReset: PropTypes.func,
     onChange: PropTypes.func,
 
+    isSearchStalled: PropTypes.bool,
+    showLoadingIndicator: PropTypes.bool,
+
     // For testing purposes
     __inputRef: PropTypes.func,
   };
@@ -34,6 +76,11 @@ class SearchBox extends Component {
     focusShortcuts: ['s', '/'],
     autoFocus: false,
     searchAsYouType: true,
+    showLoadingIndicator: false,
+    isSearchStalled: false,
+    loadingIndicatorComponent: <DefaultLoadingIndicator />,
+    submitComponent: <DefaultSubmit />,
+    resetComponent: <DefaultReset />,
   };
 
   constructor(props) {
@@ -156,21 +203,9 @@ class SearchBox extends Component {
     const { translate, autoFocus } = this.props;
     const query = this.getQuery();
 
-    const submitComponent = this.props.submitComponent ? (
-      this.props.submitComponent
-    ) : (
-      <svg role="img" width="1em" height="1em">
-        <use xlinkHref="#sbx-icon-search-13" />
-      </svg>
-    );
-
-    const resetComponent = this.props.resetComponent ? (
-      this.props.resetComponent
-    ) : (
-      <svg role="img" width="1em" height="1em">
-        <use xlinkHref="#sbx-icon-clear-3" />
-      </svg>
-    );
+    const submitComponent = this.props.submitComponent;
+    const resetComponent = this.props.resetComponent;
+    const loadingIndicatorComponent = this.props.loadingIndicatorComponent;
 
     const searchInputEvents = Object.keys(this.props).reduce((props, prop) => {
       if (
@@ -184,6 +219,9 @@ class SearchBox extends Component {
       return props;
     }, {});
 
+    const isSearchStalled =
+      this.props.showLoadingIndicator && this.props.isSearchStalled;
+
     /* eslint-disable max-len */
     return (
       <form
@@ -216,7 +254,10 @@ class SearchBox extends Component {
             />
           </symbol>
         </svg>
-        <div role="search" {...cx('wrapper')}>
+        <div
+          role="search"
+          {...cx('wrapper', isSearchStalled && 'stalled-search')}
+        >
           <input
             ref={this.onInputMount}
             type="search"
@@ -233,9 +274,22 @@ class SearchBox extends Component {
             {...searchInputEvents}
             {...cx('input')}
           />
+          {this.props.showLoadingIndicator && (
+            <div
+              style={{
+                display: isSearchStalled ? 'block' : 'none',
+              }}
+              {...cx('loading-indicator')}
+            >
+              {loadingIndicatorComponent}
+            </div>
+          )}
           <button
             type="submit"
             title={translate('submitTitle')}
+            style={{
+              display: isSearchStalled ? 'none' : 'block',
+            }}
             {...cx('submit')}
           >
             {submitComponent}

packages/react-instantsearch/src/components/__snapshots__/Menu.test.js.snap

@@ -64,6 +64,11 @@ exports[`Menu Menu with search inside items but no search results 1`] = `
         />
         <button
           className="ais-SearchBox__submit"
+          style={
+            Object {
+              "display": "block",
+            }
+          }
           title="Submit your search query."
           type="submit"
         >
@@ -230,6 +235,11 @@ exports[`Menu Menu with search inside items with search results 1`] = `
         />
         <button
           className="ais-SearchBox__submit"
+          style={
+            Object {
+              "display": "block",
+            }
+          }
           title="Submit your search query."
           type="submit"
         >
@@ -352,6 +362,11 @@ exports[`Menu applies translations 1`] = `
         />
         <button
           className="ais-SearchBox__submit"
+          style={
+            Object {
+              "display": "block",
+            }
+          }
           title="Submit your search query."
           type="submit"
         >

packages/react-instantsearch/src/components/__snapshots__/RefinementList.test.js.snap

@@ -65,6 +65,11 @@ exports[`RefinementList applies translations 1`] = `
           />
           <button
             className="ais-SearchBox__submit"
+            style={
+              Object {
+                "display": "block",
+              }
+            }
             title="Submit your search query."
             type="submit"
           >
@@ -320,6 +325,11 @@ exports[`RefinementList refinement list with search inside items but no search r
           />
           <button
             className="ais-SearchBox__submit"
+            style={
+              Object {
+                "display": "block",
+              }
+            }
             title="Submit your search query."
             type="submit"
           >
@@ -503,6 +513,11 @@ exports[`RefinementList refinement list with search inside items with search res
           />
           <button
             className="ais-SearchBox__submit"
+            style={
+              Object {
+                "display": "block",
+              }
+            }
             title="Submit your search query."
             type="submit"
           >

packages/react-instantsearch/src/components/__snapshots__/SearchBox.test.js.snap

@@ -58,6 +58,11 @@ exports[`SearchBox applies its default props 1`] = `
     />
     <button
       className="ais-SearchBox__submit"
+      style={
+        Object {
+          "display": "block",
+        }
+      }
       title="Submit your search query."
       type="submit"
     >
@@ -149,6 +154,11 @@ exports[`SearchBox lets you customize its theme 1`] = `
     />
     <button
       className="ais-SearchBox__submit"
+      style={
+        Object {
+          "display": "block",
+        }
+      }
       title="Submit your search query."
       type="submit"
     >
@@ -240,6 +250,11 @@ exports[`SearchBox lets you customize its translations 1`] = `
     />
     <button
       className="ais-SearchBox__submit"
+      style={
+        Object {
+          "display": "block",
+        }
+      }
       title="Submit your search query."
       type="submit"
     >
@@ -331,6 +346,11 @@ exports[`SearchBox lets you give custom components for reset and submit 1`] = `
     />
     <button
       className="ais-SearchBox__submit"
+      style={
+        Object {
+          "display": "block",
+        }
+      }
       title="Submit your search query."
       type="submit"
     >
@@ -414,6 +434,11 @@ exports[`SearchBox transfers the autoFocus prop to the underlying input element
     />
     <button
       className="ais-SearchBox__submit"
+      style={
+        Object {
+          "display": "block",
+        }
+      }
       title="Submit your search query."
       type="submit"
     >
@@ -505,6 +530,11 @@ exports[`SearchBox treats its query prop as its input value 1`] = `
     />
     <button
       className="ais-SearchBox__submit"
+      style={
+        Object {
+          "display": "block",
+        }
+      }
       title="Submit your search query."
       type="submit"
     >
@@ -596,6 +626,11 @@ exports[`SearchBox treats its query prop as its input value 2`] = `
     />
     <button
       className="ais-SearchBox__submit"
+      style={
+        Object {
+          "display": "block",
+        }
+      }
       title="Submit your search query."
       type="submit"
     >

packages/react-instantsearch/src/connectors/connectSearchBox.js

@@ -47,6 +47,7 @@ function cleanUp(props, searchState, context) {
  * @providedPropType {function} refine - a function to remove a single filter
  * @providedPropType {function} createURL - a function to generate a URL for the corresponding search state
  * @providedPropType {string} currentRefinement - the query to search for.
+ * @providedPropType {boolean} isSearchStalled - a flag that indicates if react-is has detected that searches are stalled.
  */
 export default createConnector({
   displayName: 'AlgoliaSearchBox',
@@ -55,9 +56,10 @@ export default createConnector({
     defaultRefinement: PropTypes.string,
   },
 
-  getProvidedProps(props, searchState) {
+  getProvidedProps(props, searchState, searchResults) {
     return {
       currentRefinement: getCurrentRefinement(props, searchState, this.context),
+      isSearchStalled: searchResults.isSearchStalled,
     };
   },