Loading feedback

docs-parent/TODO

@@ -1 +0,0 @@
-- Loading feedback for document (list), document.view, tag.default

docs-web/src/main/webapp/app/docs/controller/Navigation.js

@@ -3,7 +3,7 @@
 /**
  * Navigation controller.
  */
-App.controller('Navigation', function($scope, $state, $rootScope, User, Restangular) {
+App.controller('Navigation', function($scope, $http, $state, $rootScope, User, Restangular) {
   $rootScope.userInfo = User.userInfo();
   
   /**
@@ -16,4 +16,8 @@ App.controller('Navigation', function($scope, $state, $rootScope, User, Restangu
     });
     $event.preventDefault();
   };
+  
+  $scope.isLoading = function() {
+    return $http.pendingRequests.length > 0;
+  };
 });

docs-web/src/main/webapp/index.html

@@ -60,6 +60,10 @@
     <div class="navbar" ng-controller="Navigation">
       <div class="navbar-inner">
         <div class="container">
+          <div class="brand loader" ng-class="{hide: !isLoading() }">
+            <img src="img/loader.gif" />
+          </div>
+          
           <a class="brand hidden-phone" href="#">Sismics Docs</a>
           
           <ul class="nav" ng-show="!userInfo.anonymous">

docs-web/src/main/webapp/partial/docs/document.view.html

@@ -1,11 +1,14 @@
-<div class="text-right">
+<img src="img/loader.gif" ng-show="!document" />
+
+<div ng-show="document">
+	<div class="text-right">
 	  <div class="btn-group">
 	    <button class="btn btn-danger" ng-click="deleteDocument(document)"><span class="icon-trash icon-white"></span> Delete</button>
 	    <button class="btn btn-primary" ng-click="editDocument(document.id)"><span class="icon-pencil icon-white"></span> Edit</button>
 	  </div>
-</div>
+	</div>
 	
-<div class="page-header">
+	<div class="page-header">
 	  <h1>{{ document.title }} <small>{{ document.create_date | date: 'yyyy-MM-dd' }}</small></h1>
 	  <p>
 	    <button class="btn btn-small btn-inverse" ng-click="share()"><span class="icon-share icon-white"></span> Share</button>
@@ -14,11 +17,11 @@
 	  <ul class="inline">
 	    <li ng-repeat="tag in document.tags"><span class="label label-info" ng-style="{ 'background': tag.color }">{{ tag.name }}</span></li>
 	  </ul>
-</div>
+	</div>
 	
-<p ng-bind-html="document.description | newline"></p>
+	<p ng-bind-html="document.description | newline"></p>
 	
-<ul class="thumbnails thumbnails-file" ui-sortable="fileSortableOptions" ng-model="files" ng-show="files.length > 0">
+	<ul class="thumbnails thumbnails-file" ui-sortable="fileSortableOptions" ng-model="files" ng-show="files.length > 0">
 	  <li class="span2 text-center thumbnail-container" ng-repeat="file in files">
 	    <div class="thumbnail">
 	      <a ng-click="openFile(file)">
@@ -35,6 +38,7 @@
 	      </div>
 	    </div>
 	  </li>
-</ul>
+	</ul>
 	
-<div ui-view="file"></div>
+	<div ui-view="file"></div>
+</div>

docs-web/src/main/webapp/partial/docs/tag.html

@@ -27,12 +27,16 @@
       
     </div>
     
-    <div class="span8 well">
+    <div class="span8 well" ng-if="stats.length >= 0">
       <h1>{{ tags.length }} <small>tag{{ tags.length > 1 ? 's' : '' }}</small></h1>
       <dl class="dl-horizontal" ng-repeat="stat in stats | orderBy: '-count'">
         <dt>{{ stat.name }} <span class="badge badge-info" ng-style="{ 'background': stat.color }">{{ stat.count }}</span></dt>
         <dd><progress percent="stat.count / getStatCount() * 100" class="progress-info"></progress></dd>
       </dl>
     </div>
+    
+    <div class="span8 well" ng-if="!stats">
+      <img src="img/loader.gif" />
+    </div>
   </div>
 </div>

docs-web/src/main/webapp/style/main.less

@@ -43,6 +43,16 @@
 	}
 }
 
+// $http loader
+.loader {
+	position: relative;
+	top: -2px;
+	
+	&.hide {
+	  visibility: hidden;
+	}
+}
+
 // Tags list
 .table-tags {
 	tbody td {