Fix loading indicators

Third-Culture-Software · May 5, 2020 · 57a5a9a · 57a5a9a
1 parent c614b2a
commit 57a5a9a
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 18 deletions.
diff --git a/client/src/modules/stock/requisition/modals/action.modal.html b/client/src/modules/stock/requisition/modals/action.modal.html
@@ -32,15 +32,14 @@
           <span ng-show="$ctrl.loadingSuggest"><span class="fa fa-circle-o-notch fa-spin"></span> <span translate>FORM.INFO.LOADING</span></span>
         </button>
       </div>
-
 
       <div
         id="stock-requisition-grid-articles"
         ui-grid="$ctrl.gridOptions"
         ui-grid-resize-columns
         ui-grid-auto-resize>
         <bh-grid-loading-indicator
-          loading-state="$ctrl.loading"
+          loading-state="$ctrl.loadingSuggest"
           empty-state="$ctrl.gridOptions.data.length === 0"
           error-state="$ctrl.hasError">
         </bh-grid-loading-indicator>
@@ -69,7 +68,7 @@
     <button type="button" class="btn btn-default" ng-click="$ctrl.cancel()" data-method="cancel" translate>
       FORM.BUTTONS.CLOSE
     </button>
-    <bh-loading-button loading-state="ModalForm.$loading" disabled="ModalForm.$loading">
+    <bh-loading-button loading-state="$ctrl.loading" disabled="$ctrl.loading">
       <span translate>FORM.BUTTONS.SUBMIT</span>
     </bh-loading-button>
   </div>

diff --git a/client/src/modules/stock/requisition/modals/action.modal.js b/client/src/modules/stock/requisition/modals/action.modal.js
@@ -8,7 +8,7 @@ ActionRequisitionModalController.$inject = [
 ];
 
 function ActionRequisitionModalController(
-  $state, Store, Inventories, Notify, Modal, Stock, Receipts
+  $state, Store, Inventories, Notify, Modal, Stock, Receipts,
 ) {
   const vm = this;
   const store = new Store({ data : [] });
@@ -76,14 +76,19 @@ function ActionRequisitionModalController(
 
     if (!items.length) { return null; }
 
+    vm.loading = true;
+
     angular.extend(vm.model, { items });
 
     return Stock.stockRequisition.create(vm.model)
       .then(res => {
         Receipts.stockRequisitionReceipt(res.uuid, true);
         Modal.close(true);
       })
-      .catch(Notify.handleError);
+      .catch(Notify.handleError)
+      .finally(() => {
+        vm.loading = false;
+      });
   };
 
   function autoSuggestInventories() {

diff --git a/client/src/modules/stock/requisition/registry.js b/client/src/modules/stock/requisition/registry.js
@@ -265,17 +265,6 @@ function StockRequisitionController(
     Notify.handleError(error);
   }
 
-  /**
-   * @function toggleLoadingIndicator
-   *
-   * @description
-   * Toggles the grid's loading indicator to eliminate the flash when rendering
-   * requisitions movements and allow a better UX for slow loads.
-   */
-  function toggleLoadingIndicator() {
-    vm.loading = !vm.loading;
-  }
-
   /**
    * @method load
    *
@@ -285,14 +274,16 @@ function StockRequisitionController(
    */
   function load(filters) {
     vm.hasError = false;
-    toggleLoadingIndicator();
+    vm.loading = true;
 
     Stock.stockRequisition.read(null, filters)
       .then((requisitions) => {
         vm.gridOptions.data = requisitions;
       })
       .catch(errorHandler)
-      .finally(toggleLoadingIndicator);
+      .finally(() => {
+        vm.loading = false;
+      });
   }
 
   startup();