loading message for site listings

src/popup/app/current/currentController.js

@@ -8,6 +8,8 @@ angular
             domain = null,
             canAutofill = false;
 
+        $scope.loaded = false;
+
         chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
             if (tabs.length > 0) {
                 url = tabs[0].url;
@@ -37,6 +39,7 @@ angular
                     }
                 }
 
+                $scope.loaded = true;
                 $scope.sites = filteredSites;
             });
         });

src/popup/app/current/views/current.html

@@ -24,7 +24,10 @@
             </div>
         </div>
     </div>
-    <div ng-if="!sites.length">
+    <div ng-if="loaded && !sites.length">
         <p>No sites available for tab. <a href="" ng-click="addSite()">Add one</a></p>
     </div>
+    <div ng-if="!loaded">
+        <p><i class="fa fa-lg fa-spinner fa-spin"></i></p>
+    </div>
 </div>

src/popup/app/vault/vaultController.js

@@ -5,6 +5,7 @@
         $('#search').focus();
 
         var delayLoad = true;
+        $scope.loaded = true;
         if (!$rootScope.vaultSites) {
             $rootScope.vaultSites = [];
             delayLoad = false;
@@ -12,6 +13,7 @@
         if (!$rootScope.vaultFolders) {
             $rootScope.vaultFolders = [];
             delayLoad = false;
+            $scope.loaded = false;
         }
 
         if (delayLoad) {
@@ -40,6 +42,7 @@
             promises.push(sitePromise);
 
             $q.all(promises).then(function () {
+                $scope.loaded = true;
                 $rootScope.vaultFolders = decFolders.concat([{
                     id: null,
                     name: '(none)'

src/popup/app/vault/views/vault.html

@@ -32,7 +32,10 @@
             </div>
         </div>
     </div>
-    <div ng-if="!sites.length">
+    <div ng-if="loaded && !vaultSites.length">
         <p>No sites to list. <a href="" ng-click="addSite()">Add one</a></p>
     </div>
+    <div ng-if="!loaded">
+        <p><i class="fa fa-lg fa-spinner fa-spin"></i></p>
+    </div>
 </div>