PagingTableService:

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

2 files changed, 12 insertions, 3 deletions

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>