feat(loading-indicator): add API

algolia · Nov 3, 2017 · 148577f · 148577f
1 parent b11c125
commit 148577f
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 7 deletions.
diff --git a/src/components/Index.vue b/src/components/Index.vue
@@ -61,6 +61,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    stalledSearchTimeout: {
+      type: Number,
+      default: 200,
+    },
   },
   data() {
     return {
@@ -71,7 +75,8 @@ export default {
     if (!this.searchStore) {
       this._localSearchStore = createFromAlgoliaCredentials(
         this.appId,
-        this.apiKey
+        this.apiKey,
+        this.stalledSearchTimeout,
       );
     } else {
       this._localSearchStore = this.searchStore;

diff --git a/src/components/SearchBox.vue b/src/components/SearchBox.vue
@@ -3,14 +3,14 @@
     <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" v-if="!searchStore.isSearchStalled">
+        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 40 40" v-if="!showLoadingIndicator || !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">
+        <svg width="1em" height="1em" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#000" v-if="showLoadingIndicator && 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"/>
@@ -63,6 +63,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    showLoadingIndicator: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {

diff --git a/src/store.js b/src/store.js
@@ -15,11 +15,11 @@ export const FACET_TREE = 'tree';
 export const HIGHLIGHT_PRE_TAG = '__ais-highlight__';
 export const HIGHLIGHT_POST_TAG = '__/ais-highlight__';
 
-export const createFromAlgoliaCredentials = (appID, apiKey) => {
+export const createFromAlgoliaCredentials = (appID, apiKey, stalledSearchTimeout) => {
   const client = algolia(appID, apiKey);
   const helper = algoliaHelper(client);
 
-  return new Store(helper);
+  return new Store(helper, {stalledSearchTimeout});
 };
 
 export const createFromAlgoliaClient = client => {
@@ -39,7 +39,7 @@ export const createFromSerialized = data => {
 };
 
 export class Store {
-  constructor(helper) {
+  constructor(helper, {stalledSearchTimeout = 200} = {}) {
     if (!(helper instanceof algoliaHelper.AlgoliaSearchHelper)) {
       throw new TypeError(
         'Store should be constructed with an AlgoliaSearchHelper instance as first parameter.'
@@ -55,6 +55,8 @@ export class Store {
 
     this._cacheEnabled = true;
 
+    this._stalledSearchTimeout = stalledSearchTimeout;
+
     this.algoliaHelper = helper;
   }
 
@@ -481,6 +483,6 @@ const onHelperSearch = function() {
   if(!this._stalledSearchTimer) {
     this._stalledSearchTimer = setTimeout(() => {
       this.isSearchStalled = true;
-    }, 200);
+    }, this._stalledSearchTimeout);
   }
 }