chore(journal): add loading indicator to grid

This commit adds a loading indicator to the grid for a nicer loading
animation when there are many records to fetch.

client/src/partials/journal/journal.html

@@ -32,6 +32,14 @@
           ui-grid-move-columns
           ui-grid-selection
           ui-grid-grouping>
+
+          <bh-grid-loading-indicator
+            loading-state="JournalCtrl.loading"
+            empty-state="JournalCtrl.gridOptions.data.length === 0"
+            error-state="JournalCtrl.hasError"
+          >
+        </bh-grid-loading-indicator>
+
         </div>
       </div>
     </div>

client/src/partials/journal/journal.js

@@ -8,11 +8,12 @@ JournalController.$inject = [
 ];
 
 /**
- * Posting Journal Controller
+ * @module JournalController
  *
+ * @description
  * This controller is responsible for initialising the core client side posting
  * journal, binding the UI Grid component with services that facilitate all
- * operations required by an accounted.
+ * operations required by an accountant.
  * - Displaying transactions in an easy to find and review format
  *   - Search for transactions
  *   - Filter transactions
@@ -59,10 +60,12 @@ function JournalController(Journal, Sorting, Grouping, Filtering, Columns, Confi
   .then(function (records) {
     vm.gridOptions.data = records;
   })
-  .catch(Notify.errorHandler)
+  .catch(function (error) {
+    vm.hasError = true;
+    Notify.errorHandler(error);
+  })
   .finally(toggleLoadingIndicator);
 
-
   /**
    * @function toggleLoadingIndicator
    *
@@ -74,7 +77,6 @@ function JournalController(Journal, Sorting, Grouping, Filtering, Columns, Confi
     vm.loading = !vm.loading;
   }
 
-
   /**
    * Column definitions; specify the configuration and behaviour for each column
    * in the journal grid. Initialise each of the journal utilities,

client/src/partials/templates/bhGridLoadingIndicator.tmpl.html

@@ -2,7 +2,7 @@
 
   <!-- indicate that the grid is loading -->
   <div class="msg" ng-show="$ctrl.loadingState">
-    <span><span class="fa fa-spinner fa-spin"></span> {{ "TABLE.COLUMNS.LOADING" | translate }}</span>
+    <span><span class="fa fa-circle-o-notch  fa-spin"></span> {{ "TABLE.COLUMNS.LOADING" | translate }}</span>
   </div>
 
   <!-- indicate that there is no data for the requested query -->