Loading messages for vault.

src/Vault/wwwroot/app/tools/views/tools.html

@@ -5,5 +5,5 @@
     </h1>
 </section>
 <section class="content">
-    Content
+    Several tools are available in the menu to the left. More tools coming soon...
 </section>

src/Vault/wwwroot/app/vault/vaultController.js

@@ -5,7 +5,10 @@
         $scope.sites = [];
         $scope.folders = [];
 
+        $scope.loadingSites = true;
         apiService.sites.list({}, function (sites) {
+            $scope.loadingSites = false;
+
             var decSites = [];
             for (var i = 0; i < sites.Data.length; i++) {
                 var decSite = {
@@ -25,9 +28,14 @@
             }
 
             $scope.sites = decSites;
+        }, function () {
+            $scope.loadingSites = false;
         });
 
+        $scope.loadingFolders = true;
         apiService.folders.list({}, function (folders) {
+            $scope.loadingFolders = false;
+
             var decFolders = [{
                 id: null,
                 name: '(none)'
@@ -45,6 +53,8 @@
             }
 
             $scope.folders = decFolders;
+        }, function () {
+            $scope.loadingFolders = false;
         });
 
         $scope.editSite = function (site) {

src/Vault/wwwroot/app/vault/views/vault.html

@@ -5,7 +5,10 @@
     </h1>
 </section>
 <section class="content">
-    <div class="box" ng-repeat="folder in folders | orderBy: 'name'">
+    <div ng-show="loadingFolders && !folders.length">
+        <p>Loading...</p>
+    </div>
+    <div class="box" ng-repeat="folder in folders | orderBy: 'name'" ng-show="folders.length">
         <div class="box-header with-border">
             <h3 class="box-title"><i class="fa fa-folder-open"></i> {{folder.name}}</h3>
             <div class="box-tools pull-right">
@@ -21,12 +24,15 @@
             </div>
         </div>
         <div class="box-body" ng-class="{'no-padding': folderSites.length}">
-            <div ng-show="!folderSites.length">
+            <div ng-show="loadingSites && !folderSites.length">
+                <p>Loading sites...</p>
+            </div>
+            <div ng-show="!loadingSites && !folderSites.length">
                 <p>No sites in this folder.</p>
                 <button type="button" ng-click="addSite(folder)" class="btn btn-default btn-flat">Add a Site</button>
             </div>
-            <div class="table-responsive">
-                <table class="table table-striped table-hover" ng-show="folderSites.length">
+            <div class="table-responsive" ng-show="folderSites.length">
+                <table class="table table-striped table-hover">
                     <thead>
                         <tr>
                             <th style="max-width: 200px;">Site</th>