PagingTableService:

o Adding support for showing a spinner if the query takes more than 500ms.
o Adding a spinner when searching for people.

4 files changed, 69 insertions, 4 deletions

diff --git a/src/main/resources/webapp/apps/app.js b/src/main/resources/webapp/apps/app.js
index f74206c..8896d33 100755
--- a/src/main/resources/webapp/apps/app.js
+++ b/src/main/resources/webapp/apps/app.js
@@ -107,3 +107,31 @@ directives.directive('dogtagxl', function () {
     templateUrl: '/apps/dogtagBig.html'
   }
 });
+
+directives.directive('spinner', function () {
+  return function($scope, element, attr) {
+    var opts = {
+      lines: 13, // The number of lines to draw
+      length: 7, // The length of each line
+      width: 4, // The line thickness
+      radius: 10, // The radius of the inner circle
+      corners: 1, // Corner roundness (0..1)
+      rotate: 0, // The rotation offset
+      color: '#000', // #rgb or #rrggbb
+      speed: 1, // Rounds per second
+      trail: 60, // Afterglow percentage
+      shadow: false, // Whether to render a shadow
+      hwaccel: false, // Whether to use hardware acceleration
+      className: attr.spinnerClass || 'spinner', // The CSS class to assign to the spinner
+      zIndex: 2e9, // The z-index (defaults to 2000000000)
+      top: attr.spinnerTop || 'auto', // Top position relative to parent in px
+      left: attr.spinnerLeft || 'auto' // Left position relative to parent in px
+    };
+
+    console.log("attr.spinnerTop =", attr.spinnerTop, "attr.spinnerLeft =", attr.spinnerLeft);
+
+    var target = element[0];
+    new Spinner(opts).spin(target);
+    return target;
+  }
+});
diff --git a/src/main/resources/webapp/apps/core/PagingTableService.js b/src/main/resources/webapp/apps/core/PagingTableService.js
index f38b6f1..86d08f1 100755
--- a/src/main/resources/webapp/apps/core/PagingTableService.js
+++ b/src/main/resources/webapp/apps/core/PagingTableService.js
@@ -7,15 +7,29 @@ function PagingTableService() {
       query: "",
       startIndex: options.startIndex || 0,
       count: options.count || 10,
-      currentlySearching: false
+      currentlySearching: false,
+      queryStart: 0
     };
 
     var update = function(){
       self.currentlySearching = true;
+      self.queryStart = new Date().getTime();
+
+      // This will update the spinner if the user want to show it.
+      var interval = setInterval(function () {
+        $scope.$apply();
+      }, 500);
+
       fetchCallback(self.startIndex, self.count, self.query, function(data) {
+        var now = new Date().getTime();
+        console.log("Query took " + (now - self.queryStart) + "ms");
+
+        clearInterval(interval);
+
         self.rows = data.rows;
         watcher();
         self.currentlySearching = false;
+        self.queryStart = 0;
       });
     };
 
@@ -56,6 +70,20 @@ function PagingTableService() {
       update();
     };
 
+    /*
+     * UI State queries
+     *
+     * TODO: the results should only be shown if the last query was successful. Add an 'error' state too.
+     */
+
+    self.showSpinner = function () {
+      return self.currentlySearching && new Date().getTime() - self.queryStart > 500;
+    };
+
+    self.showResults = function () {
+      return !self.currentlySearching;
+    };
+
     self.showPrev = function () {
       return self.startIndex > 0;
     };
diff --git a/src/main/resources/webapp/apps/frontPageApp/frontPageApp.js b/src/main/resources/webapp/apps/frontPageApp/frontPageApp.js
index 9e507b4..def1e67 100755
--- a/src/main/resources/webapp/apps/frontPageApp/frontPageApp.js
+++ b/src/main/resources/webapp/apps/frontPageApp/frontPageApp.js
@@ -71,13 +71,13 @@ function BadgeCtrl($scope, $routeParams, Badge) {
 }
 
 function PersonListCtrl($scope, Person, PagingTableService) {
-  var groupSize = 4;
+  var groupSize = 4, rows = 6;
   var personsWatcher = function () {
     $scope.personGroups = groupBy($scope.persons.rows, groupSize);
   };
 
   $scope.persons = PagingTableService.create($scope, PagingTableService.defaultCallback(Person, {orderBy: "name"}),
-      {count: groupSize * 6, watcher: personsWatcher});
+      {count: groupSize * rows, watcher: personsWatcher});
 
   console.log("$scope.persons.searchText", $scope.persons.searchText);
   console.log("$scope.persons.rows", $scope.persons.rows);
diff --git a/src/main/resources/webapp/apps/frontPageApp/personList.html b/src/main/resources/webapp/apps/frontPageApp/personList.html
index 2c14b01..9f977ee 100755
--- a/src/main/resources/webapp/apps/frontPageApp/personList.html
+++ b/src/main/resources/webapp/apps/frontPageApp/personList.html
@@ -33,7 +33,15 @@
 
   <div class="row">
     <div class="span12">
-      <div class="row" ng-repeat="group in personGroups">
+      <div class="row" ng-show="persons.showSpinner()">
+        <div class="span12">
+          <div style="height: 100px">
+            <div spinner spinner-class="wat" spinner-left="564px" spinner-top="50%"></div>
+          </div>
+        </div>
+      </div>
+
+      <div class="row" ng-repeat="group in personGroups" ng-show="persons.showResults()">
         <div class="span3" ng-repeat="person in group" style="padding-bottom: 1em">
           <div class="row">
             <person-avatar person="person.person"></person-avatar>
@@ -45,6 +53,7 @@
           </div>
         </div>
       </div>
+
       <ul class="pager">
         <li ng-show="persons.showPrev()" class="previous {{{true: 'disabled', false: ''}[persons.prevDisabled()]}}">
           <a ng-click="persons.prev()">&larr; Prev</a>