Reapply changes from PR #310

src/scripts/actions/general.js

@@ -0,0 +1,6 @@
+/* eslint-disable import/prefer-default-export */
+
+export const setIsLoading = isLoading => ({
+  type: 'LOADING',
+  isLoading,
+});

src/scripts/actions/general.test.js

@@ -0,0 +1,15 @@
+import { expect } from 'chai';
+import * as actions from './general';
+
+describe('actions/general', () => {
+  describe('setIsLoading action', () => {
+    it('returns LOADING action with passed loading flag', () => {
+      const expectedAction = {
+        type: 'LOADING',
+        isLoading: true,
+      };
+
+      expect(actions.setIsLoading(true)).to.eql(expectedAction);
+    });
+  });
+});

src/scripts/choices.js

@@ -22,6 +22,7 @@ import {
 import { addItem, removeItem, highlightItem } from './actions/items';
 import { addGroup } from './actions/groups';
 import { clearAll, resetTo } from './actions/misc';
+import { setIsLoading } from './actions/general';
 import {
   isScrolledIntoView,
   getAdjacentEl,
@@ -438,7 +439,9 @@ class Choices {
       }
     };
 
+    this._setLoading(true);
     choices.forEach(addGroupsAndChoices);
+    this._setLoading(false);
 
     return this;
   }
@@ -478,6 +481,10 @@ class Choices {
   ============================================= */
 
   _render() {
+    if (this._store.isLoading()) {
+      return;
+    }
+
     this._currentState = this._store.state;
 
     const stateChanged =
@@ -870,12 +877,16 @@ class Choices {
     }
   }
 
-  _handleLoadingState(isLoading = true) {
+  _setLoading(isLoading) {
+    this._store.dispatch(setIsLoading(isLoading));
+  }
+
+  _handleLoadingState(setLoading = true) {
     let placeholderItem = this.itemList.getChild(
       `.${this.config.classNames.placeholder}`,
     );
 
-    if (isLoading) {
+    if (setLoading) {
       this.disable();
       this.containerOuter.addLoadingState();
 
@@ -994,6 +1005,7 @@ class Choices {
       ) {
         // Remove loading states/text
         this._handleLoadingState(false);
+        this._setLoading(true);
         // Add each result as a choice
         parsedResults.forEach(result => {
           if (result.choices) {
@@ -1015,6 +1027,8 @@ class Choices {
           }
         });
 
+        this._setLoading(false);
+
         if (this._isSelectOneElement) {
           this._selectPlaceholderChoice();
         }
@@ -1872,6 +1886,7 @@ class Choices {
 
     this._highlightPosition = 0;
     this._isSearching = false;
+    this._setLoading(true);
 
     if (passedGroups && passedGroups.length) {
       // If we have a placeholder option
@@ -1961,6 +1976,8 @@ class Choices {
       // Add each choice
       allChoices.forEach((choice, index) => handleChoice(choice, index));
     }
+
+    this._setLoading(false);
   }
 
   _addPredefinedItems() {

src/scripts/reducers/general.js

@@ -0,0 +1,19 @@
+export const defaultState = {
+  loading: false,
+};
+
+const general = (state = defaultState, action) => {
+  switch (action.type) {
+    case 'LOADING': {
+      return {
+        loading: action.isLoading,
+      };
+    }
+
+    default: {
+      return state;
+    }
+  }
+};
+
+export default general;

src/scripts/reducers/general.test.js

@@ -0,0 +1,23 @@
+import { expect } from 'chai';
+import general, { defaultState } from './general';
+
+describe('reducers/general', () => {
+  it('should return same state when no action matches', () => {
+    expect(general(defaultState, {})).to.equal(defaultState);
+  });
+
+  describe('LOADING', () => {
+    it('sets loading state', () => {
+      const expectedState = {
+        loading: true,
+      };
+
+      const actualState = general(undefined, {
+        type: 'LOADING',
+        isLoading: true,
+      });
+
+      expect(expectedState).to.eql(actualState);
+    });
+  });
+});

src/scripts/reducers/index.js

@@ -2,12 +2,14 @@ import { combineReducers } from 'redux';
 import items from './items';
 import groups from './groups';
 import choices from './choices';
+import general from './general';
 import { cloneObject } from '../lib/utils';
 
 const appReducer = combineReducers({
   items,
   groups,
   choices,
+  general,
 });
 
 const rootReducer = (passedState, action) => {

src/scripts/reducers/index.test.js

@@ -33,6 +33,9 @@ describe('reducers/rootReducer', () => {
         items: [],
         groups: [],
         choices: [],
+        general: {
+          loading: false,
+        },
       });
     });
   });

src/scripts/store/store.js

@@ -129,6 +129,14 @@ export default class Store {
     }, []);
   }
 
+  /**
+   * Get loading state from store
+   * @return {Boolean} Loading State
+   */
+  isLoading() {
+    return this.state.general.loading;
+  }
+
   /**
    * Get single choice by it's ID
    * @return {Object} Found choice