GUAC-897 Using a spinner instead of a distracting modal.

guacamole/src/main/webapp/app/home/controllers/homeController.js

@@ -40,10 +40,7 @@ angular.module('home').controller('homeController', ['$scope', '$injector',
     $scope.recentConnections = [];
     
     // Set status to loading until we have all the connections and groups loaded
-    $scope.showStatus({
-        title : 'status.loadingTitle',
-        text  : 'status.loadingText'
-    });
+    $scope.loading = true;
     
     /* Fetch all connections and groups, then find which recent connections
      * still refer to valid connections and groups.
@@ -83,7 +80,7 @@ angular.module('home').controller('homeController', ['$scope', '$injector',
             }
         });
         
-        $scope.showStatus(false);
+        $scope.loading = false;
     });
     
     /**

guacamole/src/main/webapp/app/home/templates/home.html

@@ -72,7 +72,7 @@
 
     <!-- All connections for this user -->
     <h2>{{'home.allConnections' | translate}}</h2>
-    <div class="all-connections">
+    <div class="all-connections" ng-class="{loading: loading}">
         <div class="list-item" ng-repeat="item in connectionsAndGroups | orderBy : 'name'" ng-include="'nestedGroup.html'"></div>
     </div>
 </div>

guacamole/src/main/webapp/app/index/styles/status.css

@@ -109,3 +109,14 @@
 .shown .status {
     visibility: visible;
 }
+
+.loading {
+    background-image: url(images/spinner.gif);
+    background-position: center;
+    background-repeat: no-repeat;
+    min-height: 200px;
+}
+
+.loading * {
+    visibility: hidden;
+}

guacamole/src/main/webapp/app/manage/controllers/manageController.js

@@ -36,10 +36,8 @@ angular.module('manage').controller('manageController', ['$scope', '$injector',
     var userService                 = $injector.get('userService');
     
     // Set status to loading until we have all the connections, groups, and users have loaded
-    $scope.showStatus({
-        title : 'status.loadingTitle',
-        text  : 'status.loadingText'
-    });
+    $scope.loadingUsers         = true;
+    $scope.loadingConnections   = true;
     
     // All the connections and connection groups in root
     $scope.connectionsAndGroups = [];
@@ -47,15 +45,6 @@ angular.module('manage').controller('manageController', ['$scope', '$injector',
     // All users that the current user has permission to edit
     $scope.users = [];
     
-    // Hide the status message once users, groups, and connections have fully loaded
-    var usersLoaded                 = false;
-    var connectionsAndGroupsLoaded  = false;
-    function checkLoadStatus() {
-        if(usersLoaded && connectionsAndGroupsLoaded) {
-            $scope.showStatus(false);
-        }
-    }
-    
     $scope.basicPermissionsLoaded.then(function basicPermissionsHaveBeenLoaded() {
         connectionGroupService.getAllGroupsAndConnections([], undefined, true, true).then(function filterConnectionsAndGroups(rootGroupList) {
             $scope.rootGroup = rootGroupList[0];
@@ -73,8 +62,7 @@ angular.module('manage').controller('manageController', ['$scope', '$injector',
                 );
             }
             
-            connectionsAndGroupsLoaded = true; 
-            checkLoadStatus();
+            $scope.loadingConnections = false; 
         });
         
         userDAO.getUsers().success(function filterEditableUsers(users) {
@@ -89,8 +77,7 @@ angular.module('manage').controller('manageController', ['$scope', '$injector',
                 );
             }
             
-            usersLoaded = true;
-            checkLoadStatus();
+            $scope.loadingUsers = false; 
         });
     });
     

guacamole/src/main/webapp/app/manage/templates/manage.html

@@ -62,7 +62,7 @@ THE SOFTWARE.
         </div>
 
         <!-- List of users this user has access to -->
-        <div class="user-list">
+        <div class="user-list" ng-class="{loading: loadingUsers}">
             <div ng-click="editUser(user)" ng-repeat="user in users | orderBy : 'username'" class="list-item">
                 <div class="caption">
                     <div class="icon user"></div>
@@ -84,7 +84,7 @@ THE SOFTWARE.
         </div>
 
         <!-- List of connections and groups this user has access to -->
-        <div class="connection-list">
+        <div class="connection-list" ng-class="{loading: loadingConnections}">
             <div class="list-item" ng-repeat="item in connectionsAndGroups | orderBy : 'name'" ng-include="'nestedGroup.html'"></div>
         </div>
     </div>

guacamole/src/main/webapp/translations/en_US.json

@@ -3,11 +3,6 @@
         "title" : "Guacamole ${project.version}"
     },
     
-    "status" : {
-        "loadingTitle"  : "Loading",
-        "loadingText"   : "Guacamole is loading; please wait..."
-    },
-    
     "login": {
         "loginError" : "Invalid Login",
         "username"   : "Username",