Merge branch 'tostringtheory-master'

assets/scripts/dist/choices.js

@@ -1,4 +1,4 @@
-/*! choices.js v3.0.2 | (c) 2017 Josh Johnson | https://github.com/jshjohnson/Choices#readme */ 
+/*! choices.js v3.0.2 | (c) 2018 Josh Johnson | https://github.com/jshjohnson/Choices#readme */ 
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
 		module.exports = factory();
@@ -78,11 +78,11 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	var _index2 = _interopRequireDefault(_index);
 
-	var _index3 = __webpack_require__(30);
+	var _index3 = __webpack_require__(31);
 
-	var _utils = __webpack_require__(31);
+	var _utils = __webpack_require__(32);
 
-	__webpack_require__(32);
+	__webpack_require__(33);
 
 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -576,6 +576,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	  }, {
 	    key: 'render',
 	    value: function render() {
+	      if (this.store.isLoading()) return;
+
 	      this.currentState = this.store.getState();
 
 	      // Only render if our state has actually changed
@@ -1102,10 +1104,14 @@ return /******/ (function(modules) { // webpackBootstrap
 	          if (!(0, _utils.isType)('Array', choices) || !value) {
 	            return this;
 	          }
+
 	          // Clear choices if needed
 	          if (replaceChoices) {
 	            this._clearChoices();
 	          }
+
+	          this._setLoading(true);
+
 	          // Add choices if passed
 	          if (choices && choices.length) {
 	            this.containerOuter.classList.remove(this.config.classNames.loadingState);
@@ -1117,6 +1123,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	              }
 	            });
 	          }
+
+	          this._setLoading(false);
 	        }
 	      }
 	      return this;
@@ -1483,7 +1491,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    /**
 	     * Apply or remove a loading state to the component.
-	     * @param {Boolean} isLoading default value set to 'true'.
+	     * @param {Boolean} setLoading default value set to 'true'.
 	     * @return
 	     * @private
 	     */
@@ -1491,10 +1499,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	  }, {
 	    key: '_handleLoadingState',
 	    value: function _handleLoadingState() {
-	      var isLoading = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+	      var setLoading = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
 
 	      var placeholderItem = this.itemList.querySelector('.' + this.config.classNames.placeholder);
-	      if (isLoading) {
+	      if (setLoading) {
 	        this.containerOuter.classList.add(this.config.classNames.loadingState);
 	        this.containerOuter.setAttribute('aria-busy', 'true');
 	        if (this.isSelectOneElement) {
@@ -1541,6 +1549,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	          // Remove loading states/text
 	          _this15._handleLoadingState(false);
 	          // Add each result as a choice
+
+	          _this15._setLoading(true);
+
 	          parsedResults.forEach(function (result) {
 	            if (result.choices) {
 	              var groupId = result.id || null;
@@ -1550,6 +1561,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	            }
 	          });
 
+	          _this15._setLoading(false);
+
 	          if (_this15.isSelectOneElement) {
 	            _this15._selectPlaceholderChoice();
 	          }
@@ -2689,6 +2702,11 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	      this.config.templates = (0, _utils.extend)(templates, userTemplates);
 	    }
+	  }, {
+	    key: '_setLoading',
+	    value: function _setLoading(isLoading) {
+	      this.store.dispatch((0, _index3.setIsLoading)(isLoading));
+	    }
 
 	    /**
 	     * Create DOM structure around passed select element
@@ -2770,6 +2788,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	        this.highlightPosition = 0;
 	        this.isSearching = false;
 
+	        this._setLoading(true);
+
 	        if (passedGroups && passedGroups.length) {
 	          passedGroups.forEach(function (group) {
 	            _this23._addGroup(group, group.id || null);
@@ -2814,6 +2834,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	            }
 	          });
 	        }
+
+	        this._setLoading(false);
 	      } else if (this.isTextElement) {
 	        // Add any preset values seperated by delimiter
 	        this.presetItems.forEach(function (item) {
@@ -3788,6 +3810,18 @@ return /******/ (function(modules) { // webpackBootstrap
 	      this.store.subscribe(onChange);
 	    }
 
+	    /**
+	     * Get loading state from store
+	     * @return {Boolean} Loading State
+	     */
+
+	  }, {
+	    key: 'isLoading',
+	    value: function isLoading() {
+	      var state = this.store.getState();
+	      return state.general.loading;
+	    }
+
 	    /**
 	     * Get items from store
 	     * @return {Array} Item objects
@@ -4065,34 +4099,33 @@ return /******/ (function(modules) { // webpackBootstrap
 	 */
 	var ActionTypes = exports.ActionTypes = {
 	  INIT: '@@redux/INIT'
-	};
 
-	/**
+	  /**
-	 * Creates a Redux store that holds the state tree.
+	   * Creates a Redux store that holds the state tree.
-	 * The only way to change the data in the store is to call `dispatch()` on it.
+	   * The only way to change the data in the store is to call `dispatch()` on it.
-	 *
+	   *
-	 * There should only be a single store in your app. To specify how different
+	   * There should only be a single store in your app. To specify how different
-	 * parts of the state tree respond to actions, you may combine several reducers
+	   * parts of the state tree respond to actions, you may combine several reducers
-	 * into a single reducer function by using `combineReducers`.
+	   * into a single reducer function by using `combineReducers`.
-	 *
+	   *
-	 * @param {Function} reducer A function that returns the next state tree, given
+	   * @param {Function} reducer A function that returns the next state tree, given
-	 * the current state tree and the action to handle.
+	   * the current state tree and the action to handle.
-	 *
+	   *
-	 * @param {any} [preloadedState] The initial state. You may optionally specify it
+	   * @param {any} [preloadedState] The initial state. You may optionally specify it
-	 * to hydrate the state from the server in universal apps, or to restore a
+	   * to hydrate the state from the server in universal apps, or to restore a
-	 * previously serialized user session.
+	   * previously serialized user session.
-	 * If you use `combineReducers` to produce the root reducer function, this must be
+	   * If you use `combineReducers` to produce the root reducer function, this must be
-	 * an object with the same shape as `combineReducers` keys.
+	   * an object with the same shape as `combineReducers` keys.
-	 *
+	   *
-	 * @param {Function} enhancer The store enhancer. You may optionally specify it
+	   * @param {Function} [enhancer] The store enhancer. You may optionally specify it
-	 * to enhance the store with third-party capabilities such as middleware,
+	   * to enhance the store with third-party capabilities such as middleware,
-	 * time travel, persistence, etc. The only store enhancer that ships with Redux
+	   * time travel, persistence, etc. The only store enhancer that ships with Redux
-	 * is `applyMiddleware()`.
+	   * is `applyMiddleware()`.
-	 *
+	   *
-	 * @returns {Store} A Redux store that lets you read the state, dispatch actions
+	   * @returns {Store} A Redux store that lets you read the state, dispatch actions
-	 * and subscribe to changes.
+	   * and subscribe to changes.
-	 */
+	   */
-	function createStore(reducer, preloadedState, enhancer) {
+	};function createStore(reducer, preloadedState, enhancer) {
 	  var _ref2;
 
 	  if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
@@ -4226,7 +4259,8 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    var listeners = currentListeners = nextListeners;
 	    for (var i = 0; i < listeners.length; i++) {
-	      listeners[i]();
+	      var listener = listeners[i];
+	      listener();
 	    }
 
 	    return action;
@@ -4255,7 +4289,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	   * Interoperability point for observable/reactive libraries.
 	   * @returns {observable} A minimal observable of state changes.
 	   * For more information, see the observable proposal:
-	   * https://github.com/zenparsing/es-observable
+	   * https://github.com/tc39/proposal-observable
 	   */
 	  function observable() {
 	    var _ref;
@@ -4702,7 +4736,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	  var actionType = action && action.type;
 	  var actionName = actionType && '"' + actionType.toString() + '"' || 'an action';
 
-	  return 'Given action ' + actionName + ', reducer "' + key + '" returned undefined. ' + 'To ignore an action, you must explicitly return the previous state.';
+	  return 'Given action ' + actionName + ', reducer "' + key + '" returned undefined. ' + 'To ignore an action, you must explicitly return the previous state. ' + 'If you want this reducer to hold no value, you can return null instead of undefined.';
 	}
 
 	function getUnexpectedStateShapeWarningMessage(inputState, reducers, action, unexpectedKeyCache) {
@@ -4730,18 +4764,18 @@ return /******/ (function(modules) { // webpackBootstrap
 	  }
 	}
 
-	function assertReducerSanity(reducers) {
+	function assertReducerShape(reducers) {
 	  Object.keys(reducers).forEach(function (key) {
 	    var reducer = reducers[key];
 	    var initialState = reducer(undefined, { type: _createStore.ActionTypes.INIT });
 
 	    if (typeof initialState === 'undefined') {
-	      throw new Error('Reducer "' + key + '" returned undefined during initialization. ' + 'If the state passed to the reducer is undefined, you must ' + 'explicitly return the initial state. The initial state may ' + 'not be undefined.');
+	      throw new Error('Reducer "' + key + '" returned undefined during initialization. ' + 'If the state passed to the reducer is undefined, you must ' + 'explicitly return the initial state. The initial state may ' + 'not be undefined. If you don\'t want to set a value for this reducer, ' + 'you can use null instead of undefined.');
 	    }
 
 	    var type = '@@redux/PROBE_UNKNOWN_ACTION_' + Math.random().toString(36).substring(7).split('').join('.');
 	    if (typeof reducer(undefined, { type: type }) === 'undefined') {
-	      throw new Error('Reducer "' + key + '" returned undefined when probed with a random type. ' + ('Don\'t try to handle ' + _createStore.ActionTypes.INIT + ' or other actions in "redux/*" ') + 'namespace. They are considered private. Instead, you must return the ' + 'current state for any unknown actions, unless it is undefined, ' + 'in which case you must return the initial state, regardless of the ' + 'action type. The initial state may not be undefined.');
+	      throw new Error('Reducer "' + key + '" returned undefined when probed with a random type. ' + ('Don\'t try to handle ' + _createStore.ActionTypes.INIT + ' or other actions in "redux/*" ') + 'namespace. They are considered private. Instead, you must return the ' + 'current state for any unknown actions, unless it is undefined, ' + 'in which case you must return the initial state, regardless of the ' + 'action type. The initial state may not be undefined, but can be null.');
 	    }
 	  });
 	}
@@ -4780,23 +4814,24 @@ return /******/ (function(modules) { // webpackBootstrap
 	  }
 	  var finalReducerKeys = Object.keys(finalReducers);
 
+	  var unexpectedKeyCache = void 0;
 	  if (false) {
-	    var unexpectedKeyCache = {};
+	    unexpectedKeyCache = {};
 	  }
 
-	  var sanityError;
+	  var shapeAssertionError = void 0;
 	  try {
-	    assertReducerSanity(finalReducers);
+	    assertReducerShape(finalReducers);
 	  } catch (e) {
-	    sanityError = e;
+	    shapeAssertionError = e;
 	  }
 
 	  return function combination() {
-	    var state = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
+	    var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 	    var action = arguments[1];
 
-	    if (sanityError) {
+	    if (shapeAssertionError) {
-	      throw sanityError;
+	      throw shapeAssertionError;
 	    }
 
 	    if (false) {
@@ -4808,16 +4843,16 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    var hasChanged = false;
 	    var nextState = {};
-	    for (var i = 0; i < finalReducerKeys.length; i++) {
+	    for (var _i = 0; _i < finalReducerKeys.length; _i++) {
-	      var key = finalReducerKeys[i];
+	      var _key = finalReducerKeys[_i];
-	      var reducer = finalReducers[key];
+	      var reducer = finalReducers[_key];
-	      var previousStateForKey = state[key];
+	      var previousStateForKey = state[_key];
 	      var nextStateForKey = reducer(previousStateForKey, action);
 	      if (typeof nextStateForKey === 'undefined') {
-	        var errorMessage = getUndefinedStateErrorMessage(key, action);
+	        var errorMessage = getUndefinedStateErrorMessage(_key, action);
 	        throw new Error(errorMessage);
 	      }
-	      nextState[key] = nextStateForKey;
+	      nextState[_key] = nextStateForKey;
 	      hasChanged = hasChanged || nextStateForKey !== previousStateForKey;
 	    }
 	    return hasChanged ? nextState : state;
@@ -5007,13 +5042,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	    return funcs[0];
 	  }
 
-	  var last = funcs[funcs.length - 1];
+	  return funcs.reduce(function (a, b) {
-	  var rest = funcs.slice(0, -1);
+	    return function () {
-	  return function () {
+	      return a(b.apply(undefined, arguments));
-	    return rest.reduceRight(function (composed, f) {
+	    };
-	      return f(composed);
+	  });
-	    }, last.apply(undefined, arguments));
-	  };
 	}
 
 /***/ }),
@@ -5040,12 +5073,17 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	var _choices2 = _interopRequireDefault(_choices);
 
+	var _general = __webpack_require__(30);
+
+	var _general2 = _interopRequireDefault(_general);
+
 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 	var appReducer = (0, _redux.combineReducers)({
 	  items: _items2.default,
 	  groups: _groups2.default,
-	  choices: _choices2.default
+	  choices: _choices2.default,
+	  general: _general2.default
 	});
 
 	var rootReducer = function rootReducer(passedState, action) {
@@ -5194,10 +5232,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	  switch (action.type) {
 	    case 'ADD_CHOICE':
 	      {
-	        /*
+	        /*
-	            A disabled choice appears in the choice dropdown but cannot be selected
+	            A disabled choice appears in the choice dropdown but cannot be selected
-	            A selected choice has been added to the passed input's value (added as an item)
+	            A selected choice has been added to the passed input's value (added as an item)
-	            An active choice appears within the choice dropdown
+	            An active choice appears within the choice dropdown
 	         */
 	        return [].concat(_toConsumableArray(state), [{
 	          id: action.id,
@@ -5305,6 +5343,36 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	'use strict';
 
+	Object.defineProperty(exports, "__esModule", {
+	  value: true
+	});
+	var general = function general() {
+	  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : { loading: false };
+	  var action = arguments[1];
+
+	  switch (action.type) {
+	    case 'LOADING':
+	      {
+	        return {
+	          loading: action.isLoading
+	        };
+	      }
+
+	    default:
+	      {
+	        return state;
+	      }
+	  }
+	};
+
+	exports.default = general;
+
+/***/ }),
+/* 31 */
+/***/ (function(module, exports) {
+
+	'use strict';
+
 	Object.defineProperty(exports, "__esModule", {
 	  value: true
 	});
@@ -5388,11 +5456,18 @@ return /******/ (function(modules) { // webpackBootstrap
 	var clearAll = exports.clearAll = function clearAll() {
 	  return {
 	    type: 'CLEAR_ALL'
+	  };
+	};
+
+	var setIsLoading = exports.setIsLoading = function setIsLoading(isLoading) {
+	  return {
+	    type: 'LOADING',
+	    isLoading: isLoading
 	  };
 		};
 
 /***/ }),
-/* 31 */
+/* 32 */
 /***/ (function(module, exports) {
 
 	'use strict';
@@ -5404,10 +5479,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 
 	/* eslint-disable */
-	/**
+	/**
-	 * Capitalises the first letter of each word in a string
+	 * Capitalises the first letter of each word in a string
-	 * @param  {String} str String to capitalise
+	 * @param  {String} str String to capitalise
-	 * @return {String}     Capitalised string
+	 * @return {String}     Capitalised string
 	 */
 	var capitalise = exports.capitalise = function capitalise(str) {
 	  return str.replace(/\w\S*/g, function (txt) {
@@ -5415,10 +5490,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	  });
 	};
 
-	/**
+	/**
-	 * Generates a string of random chars
+	 * Generates a string of random chars
-	 * @param  {Number} length Length of the string to generate
+	 * @param  {Number} length Length of the string to generate
-	 * @return {String} String of random chars
+	 * @return {String} String of random chars
 	 */
 	var generateChars = exports.generateChars = function generateChars(length) {
 	  var chars = '';
@@ -5431,11 +5506,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	  return chars;
 	};
 
-	/**
+	/**
-	 * Generates a unique id based on an element
+	 * Generates a unique id based on an element
-	 * @param  {HTMLElement} element Element to generate the id from
+	 * @param  {HTMLElement} element Element to generate the id from
-	 * @param  {String} Prefix for the Id
+	 * @param  {String} Prefix for the Id
-	 * @return {String} Unique Id
+	 * @return {String} Unique Id
 	 */
 	var generateId = exports.generateId = function generateId(element, prefix) {
 	  var id = element.id || element.name && element.name + '-' + generateChars(2) || generateChars(4);
@@ -5445,58 +5520,58 @@ return /******/ (function(modules) { // webpackBootstrap
 	  return id;
 	};
 
-	/**
+	/**
-	 * Tests the type of an object
+	 * Tests the type of an object
-	 * @param  {String}  type Type to test object against
+	 * @param  {String}  type Type to test object against
-	 * @param  {Object}  obj  Object to be tested
+	 * @param  {Object}  obj  Object to be tested
-	 * @return {Boolean}
+	 * @return {Boolean}
 	 */
 	var getType = exports.getType = function getType(obj) {
 	  return Object.prototype.toString.call(obj).slice(8, -1);
 	};
 
-	/**
+	/**
-	 * Tests the type of an object
+	 * Tests the type of an object
-	 * @param  {String}  type Type to test object against
+	 * @param  {String}  type Type to test object against
-	 * @param  {Object}  obj  Object to be tested
+	 * @param  {Object}  obj  Object to be tested
-	 * @return {Boolean}
+	 * @return {Boolean}
 	 */
 	var isType = exports.isType = function isType(type, obj) {
 	  var clas = getType(obj);
 	  return obj !== undefined && obj !== null && clas === type;
 	};
 
-	/**
+	/**
-	 * Tests to see if a passed object is a node
+	 * Tests to see if a passed object is a node
-	 * @param  {Object}  obj  Object to be tested
+	 * @param  {Object}  obj  Object to be tested
-	 * @return {Boolean}
+	 * @return {Boolean}
 	 */
 	var isNode = exports.isNode = function isNode(o) {
 	  return (typeof Node === 'undefined' ? 'undefined' : _typeof(Node)) === "object" ? o instanceof Node : o && (typeof o === 'undefined' ? 'undefined' : _typeof(o)) === "object" && typeof o.nodeType === "number" && typeof o.nodeName === "string";
 	};
 
-	/**
+	/**
-	 * Tests to see if a passed object is an element
+	 * Tests to see if a passed object is an element
-	 * @param  {Object}  obj  Object to be tested
+	 * @param  {Object}  obj  Object to be tested
-	 * @return {Boolean}
+	 * @return {Boolean}
 	 */
 	var isElement = exports.isElement = function isElement(o) {
 	  return (typeof HTMLElement === 'undefined' ? 'undefined' : _typeof(HTMLElement)) === "object" ? o instanceof HTMLElement : //DOM2
 	  o && (typeof o === 'undefined' ? 'undefined' : _typeof(o)) === "object" && o !== null && o.nodeType === 1 && typeof o.nodeName === "string";
 	};
 
-	/**
+	/**
-	 * Merges unspecified amount of objects into new object
+	 * Merges unspecified amount of objects into new object
-	 * @private
+	 * @private
-	 * @return {Object} Merged object of arguments
+	 * @return {Object} Merged object of arguments
 	 */
 	var extend = exports.extend = function extend() {
 	  var extended = {};
 	  var length = arguments.length;
 
-	  /**
+	  /**
-	   * Merge one object into another
+	   * Merge one object into another
-	   * @param  {Object} obj  Object to merge into extended object
+	   * @param  {Object} obj  Object to merge into extended object
 	   */
 	  var merge = function merge(obj) {
 	    for (var prop in obj) {
@@ -5525,9 +5600,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	  return extended;
 	};
 
-	/**
+	/**
-	 * CSS transition end event listener
+	 * CSS transition end event listener
-	 * @return
+	 * @return
 	 */
 	var whichTransitionEvent = exports.whichTransitionEvent = function whichTransitionEvent() {
 	  var t,
@@ -5547,9 +5622,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	  }
 	};
 
-	/**
+	/**
-	 * CSS animation end event listener
+	 * CSS animation end event listener
-	 * @return
+	 * @return
 	 */
 	var whichAnimationEvent = exports.whichAnimationEvent = function whichAnimationEvent() {
 	  var t,
@@ -5569,13 +5644,13 @@ return /******/ (function(modules) { // webpackBootstrap
 	  }
 	};
 
-	/**
+	/**
-	 *  Get the ancestors of each element in the current set of matched elements,
+	 *  Get the ancestors of each element in the current set of matched elements,
-	 *  up to but not including the element matched by the selector
+	 *  up to but not including the element matched by the selector
-	 * @param  {NodeElement} elem     Element to begin search from
+	 * @param  {NodeElement} elem     Element to begin search from
-	 * @param  {NodeElement} parent   Parent to find
+	 * @param  {NodeElement} parent   Parent to find
-	 * @param  {String} selector Class to find
+	 * @param  {String} selector Class to find
-	 * @return {Array}          Array of parent elements
+	 * @return {Array}          Array of parent elements
 	 */
 	var getParentsUntil = exports.getParentsUntil = function getParentsUntil(elem, parent, selector) {
 	  var parents = [];
@@ -5675,22 +5750,22 @@ return /******/ (function(modules) { // webpackBootstrap
 	  return siblings;
 	};
 
-	/**
+	/**
-	 * Find ancestor in DOM tree
+	 * Find ancestor in DOM tree
-	 * @param  {NodeElement} el  Element to start search from
+	 * @param  {NodeElement} el  Element to start search from
-	 * @param  {[type]} cls Class of parent
+	 * @param  {[type]} cls Class of parent
-	 * @return {NodeElement}     Found parent element
+	 * @return {NodeElement}     Found parent element
 	 */
 	var findAncestor = exports.findAncestor = function findAncestor(el, cls) {
 	  while ((el = el.parentElement) && !el.classList.contains(cls)) {}
 	  return el;
 	};
 
-	/**
+	/**
-	 * Find ancestor in DOM tree by attribute name
+	 * Find ancestor in DOM tree by attribute name
-	 * @param  {NodeElement} el  Element to start search from
+	 * @param  {NodeElement} el  Element to start search from
-	 * @param  {string} attr Attribute name of parent
+	 * @param  {string} attr Attribute name of parent
-	 * @return {?NodeElement}     Found parent element or null
+	 * @return {?NodeElement}     Found parent element or null
 	 */
 	var findAncestorByAttrName = exports.findAncestorByAttrName = function findAncestorByAttrName(el, attr) {
 	  var target = el;
@@ -5706,12 +5781,12 @@ return /******/ (function(modules) { // webpackBootstrap
 	  return null;
 	};
 
-	/**
+	/**
-	 * Debounce an event handler.
+	 * Debounce an event handler.
-	 * @param  {Function} func      Function to run after wait
+	 * @param  {Function} func      Function to run after wait
-	 * @param  {Number} wait      The delay before the function is executed
+	 * @param  {Number} wait      The delay before the function is executed
-	 * @param  {Boolean} immediate  If  passed, trigger the function on the leading edge, instead of the trailing.
+	 * @param  {Boolean} immediate  If  passed, trigger the function on the leading edge, instead of the trailing.
-	 * @return {Function}           A function will be called after it stops being called for a given delay
+	 * @return {Function}           A function will be called after it stops being called for a given delay
 	 */
 	var debounce = exports.debounce = function debounce(func, wait, immediate) {
 	  var timeout;
@@ -5729,11 +5804,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	  };
 	};
 
-	/**
+	/**
-	 * Get an element's distance from the top of the page
+	 * Get an element's distance from the top of the page
-	 * @private
+	 * @private
-	 * @param  {NodeElement} el Element to test for
+	 * @param  {NodeElement} el Element to test for
-	 * @return {Number} Elements Distance from top of page
+	 * @return {Number} Elements Distance from top of page
 	 */
 	var getElemDistance = exports.getElemDistance = function getElemDistance(el) {
 	  var location = 0;
@@ -5746,11 +5821,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	  return location >= 0 ? location : 0;
 	};
 
-	/**
+	/**
-	 * Determine element height multiplied by any offsets
+	 * Determine element height multiplied by any offsets
-	 * @private
+	 * @private
-	 * @param  {HTMLElement} el Element to test for
+	 * @param  {HTMLElement} el Element to test for
-	 * @return {Number}    Height of element
+	 * @return {Number}    Height of element
 	 */
 	var getElementOffset = exports.getElementOffset = function getElementOffset(el, offset) {
 	  var elOffset = offset;
@@ -5760,12 +5835,12 @@ return /******/ (function(modules) { // webpackBootstrap
 	  return Math.max(el.offsetHeight * elOffset);
 	};
 
-	/**
+	/**
-	 * Get the next or previous element from a given start point
+	 * Get the next or previous element from a given start point
-	 * @param  {HTMLElement} startEl    Element to start position from
+	 * @param  {HTMLElement} startEl    Element to start position from
-	 * @param  {String}      className  The class we will look through
+	 * @param  {String}      className  The class we will look through
-	 * @param  {Number}      direction  Positive next element, negative previous element
+	 * @param  {Number}      direction  Positive next element, negative previous element
-	 * @return {[HTMLElement}           Found element
+	 * @return {[HTMLElement}           Found element
 	 */
 	var getAdjacentEl = exports.getAdjacentEl = function getAdjacentEl(startEl, className) {
 	  var direction = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
@@ -5781,10 +5856,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	  return children[startPos + operatorDirection];
 	};
 
-	/**
+	/**
-	 * Get scroll position based on top/bottom position
+	 * Get scroll position based on top/bottom position
-	 * @private
+	 * @private
-	 * @return {String} Position of scroll
+	 * @return {String} Position of scroll
 	 */
 	var getScrollPosition = exports.getScrollPosition = function getScrollPosition(position) {
 	  if (position === 'bottom') {
@@ -5796,23 +5871,23 @@ return /******/ (function(modules) { // webpackBootstrap
 	  }
 	};
 
-	/**
+	/**
-	 * Determine whether an element is within the viewport
+	 * Determine whether an element is within the viewport
-	 * @param  {HTMLElement}  el Element to test
+	 * @param  {HTMLElement}  el Element to test
-	 * @return {String} Position of scroll
+	 * @return {String} Position of scroll
-	 * @return {Boolean}
+	 * @return {Boolean}
 	 */
 	var isInView = exports.isInView = function isInView(el, position, offset) {
 	  // If the user has scrolled further than the distance from the element to the top of its parent
 	  return this.getScrollPosition(position) > this.getElemDistance(el) + this.getElementOffset(el, offset) ? true : false;
 	};
 
-	/**
+	/**
-	 * Determine whether an element is within
+	 * Determine whether an element is within
-	 * @param  {HTMLElement} el        Element to test
+	 * @param  {HTMLElement} el        Element to test
-	 * @param  {HTMLElement} parent    Scrolling parent
+	 * @param  {HTMLElement} parent    Scrolling parent
-	 * @param  {Number} direction      Whether element is visible from above or below
+	 * @param  {Number} direction      Whether element is visible from above or below
-	 * @return {Boolean}
+	 * @return {Boolean}
 	 */
 	var isScrolledIntoView = exports.isScrolledIntoView = function isScrolledIntoView(el, parent) {
 	  var direction = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
@@ -5832,10 +5907,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	  return isVisible;
 	};
 
-	/**
+	/**
-	 * Remove html tags from a string
+	 * Remove html tags from a string
-	 * @param  {String}  Initial string/html
+	 * @param  {String}  Initial string/html
-	 * @return {String}  Sanitised string
+	 * @return {String}  Sanitised string
 	 */
 	var stripHTML = exports.stripHTML = function stripHTML(html) {
 	  var el = document.createElement("DIV");
@@ -5843,11 +5918,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	  return el.textContent || el.innerText || "";
 	};
 
-	/**
+	/**
-	 * Adds animation to an element and removes it upon animation completion
+	 * Adds animation to an element and removes it upon animation completion
-	 * @param  {Element} el        Element to add animation to
+	 * @param  {Element} el        Element to add animation to
-	 * @param  {String} animation Animation class to add to element
+	 * @param  {String} animation Animation class to add to element
-	 * @return
+	 * @return
 	 */
 	var addAnimation = exports.addAnimation = function addAnimation(el, animation) {
 	  var animationEvent = whichAnimationEvent();
@@ -5861,20 +5936,20 @@ return /******/ (function(modules) { // webpackBootstrap
 	  el.addEventListener(animationEvent, removeAnimation, false);
 	};
 
-	/**
+	/**
-	 * Get a random number between a range
+	 * Get a random number between a range
-	 * @param  {Number} min Minimum range
+	 * @param  {Number} min Minimum range
-	 * @param  {Number} max Maximum range
+	 * @param  {Number} max Maximum range
-	 * @return {Number}     Random number
+	 * @return {Number}     Random number
 	 */
 	var getRandomNumber = exports.getRandomNumber = function getRandomNumber(min, max) {
 	  return Math.floor(Math.random() * (max - min) + min);
 	};
 
-	/**
+	/**
-	 * Turn a string into a node
+	 * Turn a string into a node
-	 * @param  {String} String to convert
+	 * @param  {String} String to convert
-	 * @return {HTMLElement}   Converted node element
+	 * @return {HTMLElement}   Converted node element
 	 */
 	var strToEl = exports.strToEl = function () {
 	  var tmpEl = document.createElement('div');
@@ -5892,9 +5967,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	  };
 	}();
 
-	/**
+	/**
-	 * Sets the width of a passed input based on its value
+	 * Sets the width of a passed input based on its value
-	 * @return {Number} Width of input
+	 * @return {Number} Width of input
 	 */
 	var getWidthOfInput = exports.getWidthOfInput = function getWidthOfInput(input) {
 	  var value = input.value || input.placeholder;
@@ -5935,13 +6010,13 @@ return /******/ (function(modules) { // webpackBootstrap
 	  return width + 'px';
 	};
 
-	/**
+	/**
-	 * Sorting function for current and previous string
+	 * Sorting function for current and previous string
-	 * @param  {String} a Current value
+	 * @param  {String} a Current value
-	 * @param  {String} b Next value
+	 * @param  {String} b Next value
-	 * @return {Number}   -1 for after previous,
+	 * @return {Number}   -1 for after previous,
-	 *                    1 for before,
+	 *                    1 for before,
-	 *                    0 for same location
+	 *                    0 for same location
 	 */
 	var sortByAlpha = exports.sortByAlpha = function sortByAlpha(a, b) {
 	  var labelA = (a.label || a.value).toLowerCase();
@@ -5952,24 +6027,24 @@ return /******/ (function(modules) { // webpackBootstrap
 	  return 0;
 	};
 
-	/**
+	/**
-	 * Sort by numeric score
+	 * Sort by numeric score
-	 * @param  {Object} a Current value
+	 * @param  {Object} a Current value
-	 * @param  {Object} b Next value
+	 * @param  {Object} b Next value
-	 * @return {Number}   -1 for after previous,
+	 * @return {Number}   -1 for after previous,
-	 *                    1 for before,
+	 *                    1 for before,
-	 *                    0 for same location
+	 *                    0 for same location
 	 */
 	var sortByScore = exports.sortByScore = function sortByScore(a, b) {
 	  return a.score - b.score;
 	};
 
-	/**
+	/**
-	 * Trigger native event
+	 * Trigger native event
-	 * @param  {NodeElement} element Element to trigger event on
+	 * @param  {NodeElement} element Element to trigger event on
-	 * @param  {String} type         Type of event to trigger
+	 * @param  {String} type         Type of event to trigger
-	 * @param  {Object} customArgs   Data to pass with event
+	 * @param  {Object} customArgs   Data to pass with event
-	 * @return {Object}              Triggered event
+	 * @return {Object}              Triggered event
 	 */
 	var triggerEvent = exports.triggerEvent = function triggerEvent(element, type) {
 	  var customArgs = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
@@ -5984,7 +6059,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	};
 
 /***/ }),
-/* 32 */
+/* 33 */
 /***/ (function(module, exports) {
 
 	'use strict';

assets/scripts/src/actions/index.js

@@ -78,3 +78,11 @@ export const clearAll = () => {
     type: 'CLEAR_ALL',
   };
 };
+
+export const setIsLoading = (isLoading) => {
+  return {
+    type: 'LOADING',
+    isLoading,
+  };
+};
+

assets/scripts/src/choices.js

@@ -2,6 +2,7 @@ import Fuse from 'fuse.js';
 import classNames from 'classnames';
 import Store from './store/index.js';
 import {
+  setIsLoading,
   addItem,
   removeItem,
   highlightItem,
@@ -480,6 +481,9 @@ class Choices {
    * @private
    */
   render() {
+    if(this.store.isLoading())
+      return;
+
     this.currentState = this.store.getState();
 
     // Only render if our state has actually changed
@@ -982,10 +986,14 @@ class Choices {
         if (!isType('Array', choices) || !value) {
           return this;
         }
+
         // Clear choices if needed
         if (replaceChoices) {
           this._clearChoices();
         }
+
+        this._setLoading(true);
+
         // Add choices if passed
         if (choices && choices.length) {
           this.containerOuter.classList.remove(this.config.classNames.loadingState);
@@ -1010,6 +1018,9 @@ class Choices {
             }
           });
         }
+
+        this._setLoading(false);
+
       }
     }
     return this;
@@ -1360,13 +1371,13 @@ class Choices {
 
   /**
    * Apply or remove a loading state to the component.
-   * @param {Boolean} isLoading default value set to 'true'.
+   * @param {Boolean} setLoading default value set to 'true'.
    * @return
    * @private
    */
-  _handleLoadingState(isLoading = true) {
+  _handleLoadingState(setLoading = true) {
     let placeholderItem = this.itemList.querySelector(`.${this.config.classNames.placeholder}`);
-    if (isLoading) {
+    if (setLoading) {
       this.containerOuter.classList.add(this.config.classNames.loadingState);
       this.containerOuter.setAttribute('aria-busy', 'true');
       if (this.isSelectOneElement) {
@@ -1408,6 +1419,9 @@ class Choices {
         // Remove loading states/text
         this._handleLoadingState(false);
         // Add each result as a choice
+
+        this._setLoading(true);
+
         parsedResults.forEach((result) => {
           if (result.choices) {
             const groupId = (result.id || null);
@@ -1430,6 +1444,8 @@ class Choices {
           }
         });
 
+        this._setLoading(false);
+
         if (this.isSelectOneElement) {
           this._selectPlaceholderChoice();
         }
@@ -2689,6 +2705,12 @@ class Choices {
     this.config.templates = extend(templates, userTemplates);
   }
 
+  _setLoading(isLoading) {
+    this.store.dispatch(
+      setIsLoading(isLoading)
+    );
+  }
+
   /**
    * Create DOM structure around passed select element
    * @return
@@ -2767,6 +2789,8 @@ class Choices {
       this.highlightPosition = 0;
       this.isSearching = false;
 
+      this._setLoading(true);
+
       if (passedGroups && passedGroups.length) {
         passedGroups.forEach((group) => {
           this._addGroup(group, (group.id || null));
@@ -2825,6 +2849,9 @@ class Choices {
           }
         });
       }
+
+      this._setLoading(false);
+
     } else if (this.isTextElement) {
       // Add any preset values seperated by delimiter
       this.presetItems.forEach((item) => {

assets/scripts/src/reducers/general.js

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

assets/scripts/src/reducers/index.js

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

assets/scripts/src/store/index.js

@@ -35,6 +35,15 @@ export default class Store {
     this.store.subscribe(onChange);
   }
 
+  /**
+   * Get loading state from store
+   * @return {Boolean} Loading State
+   */
+  isLoading() {
+    const state = this.store.getState();
+    return state.general.loading;
+  }
+
   /**
    * Get items from store
    * @return {Array} Item objects