feat(loading-indicator): initial implementation

algolia · Nov 3, 2017 · 6bdf9a7 · 6bdf9a7
1 parent e937678
commit 6bdf9a7
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 1 deletion.
diff --git a/src/components/SearchBox.vue b/src/components/SearchBox.vue
@@ -3,13 +3,29 @@
     <slot>
       <ais-input :search-store="searchStore" :placeholder="placeholder" :autofocus="autofocus"></ais-input>
       <button type="submit" :class="bem('submit')">
-        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 40 40">
+        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 40 40" v-if="!searchStore.isSearchStalled">
           <title>{{ submitTitle }}</title>
           <path
             d="M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z"
             fillRule="evenodd"
           />
         </svg>
+        <svg width="1em" height="1em" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#000" v-if="searchStore.isSearchStalled">
+          <g fill="none" fill-rule="evenodd">
+              <g transform="translate(1 1)" stroke-width="2">
+                  <circle stroke-opacity=".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>
       </button>
       <ais-clear :search-store="searchStore">
         <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20">
@@ -53,6 +69,11 @@ export default {
       blockClassName: 'ais-search-box',
     };
   },
+  computed: {
+    searchStalledClassName() {
+      return this.searchStore.isSearchStalled ? 'ais-search-box__stalled-search' : '';
+    },
+  },
   methods: {
     onFormSubmit() {
       const input = this.$el.querySelector('input[type=search]');

diff --git a/src/store.js b/src/store.js
@@ -62,6 +62,7 @@ export class Store {
     if (this._helper) {
       this._helper.removeListener('change', onHelperChange);
       this._helper.removeListener('result', onHelperResult);
+      this._helper.removeListener('search', onHelperSearch);
     }
 
     this._helper = helper;
@@ -81,8 +82,20 @@ export class Store {
 
     this._helper.on('change', onHelperChange.bind(this));
     this._helper.on('result', onHelperResult.bind(this));
+    this._helper.on('search', onHelperSearch.bind(this));
 
     this._helper.getClient().addAlgoliaAgent(`vue-instantsearch ${version}`);
+
+    this._stalledSearchTimer = null;
+    this.isSearchStalled = false;
+  }
+
+  get isSearchStalled() {
+    return this._isSearchStalled;
+  }
+
+  set isSearchStalled(isStalled) {
+    this._isSearchStalled = isStalled;
   }
 
   get algoliaHelper() {
@@ -416,11 +429,17 @@ export class Store {
 
       const resolvePromise = () => {
         this._helper.removeListener('error', rejectPromise);
+        this._stalledSearchTimer = null;
+        clearTimeout(this._stalledSearchTimer);
+        this.isSearchStalled = false;
         resolve();
       };
 
       const rejectPromise = error => {
         this._helper.removeListener('searchQueueEmpty', resolvePromise);
+        this._stalledSearchTimer = null;
+        clearTimeout(this._stalledSearchTimer);
+        this.isSearchStalled = false;
         reject(error);
       };
 
@@ -450,4 +469,18 @@ const onHelperResult = function(response) {
     this.highlightPreTag,
     this.highlightPostTag
   );
+
+  if(!this._helper.hasPendingRequests()) {
+    clearTimeout(this._stalledSearchTimer);
+    this._stalledSearchTimer = null;
+    this.isSearchStalled = false;
+  }
 };
+
+const onHelperSearch = function() {
+  if(!this._stalledSearchTimer) {
+    this._stalledSearchTimer = setTimeout(() => {
+      this.isSearchStalled = true;
+    }, 200);
+  }
+}