Panel - Clients: Add loading indicator

src/pineapple/modules/Clients/js/module.js

@@ -1,11 +1,14 @@
 registerController("ClientsController", ['$api', '$scope', '$timeout', function($api, $scope, $timeout){
     $scope.clients  = [];
+    $scope.loading = false;
 
     $scope.getClientData = function(){
+        $scope.loading = true;
         $api.request({
             module: "Clients",
             action: "getClientData"
         }, function(response) {
+            $scope.loading = false;
             $scope.parseClients(response.clients);
         });
     };

src/pineapple/modules/Clients/module.html

@@ -4,7 +4,10 @@
             <div class="panel-heading">
                 <h3 class="panel-title">Clients <button class="btn btn-default btn-xs btn-fixed-length pull-right" ng-click="getClientData()">Refresh</button></h3>
             </div>
-            <div class="table-responsive table-dropdown" ng-show="clients.length">
+            <div class="center-block" ng-show="loading">
+                <br><img class="center-block" src="img/throbber.gif"><br>
+            </div>
+            <div class="table-responsive table-dropdown" ng-show="clients.length && !loading">
                 <table class="table">
                     <thead>
                     <tr>
@@ -45,7 +48,7 @@
                     </tbody>
                 </table>
             </div>
-            <div class="panel-body" ng-hide="clients.length">
+            <div class="panel-body" ng-show="(clients.length === 0) && !loading">
                 No clients found.
             </div>
         </div>