Show loader for documents list. Closes #103

css/style.css

@@ -58,7 +58,7 @@
 	text-align: center;
 }
 
-.documentslist .document {
+.documentslist .document, .documentslist .progress {
 	display: inline-block;
 	height: 200px;
 	width: 200px;
@@ -67,6 +67,14 @@
 	vertical-align: top;
 	border-radius: 5px;
 }
+
+
+.documentslist .progress{
+	position:absolute;
+	z-index:5;
+	background: #e8e8e8 url('%webroot%/core/img/loading.gif') 50% 50% no-repeat;
+}
+
 .documentslist .document:hover,
 .documentslist .document a:focus {
 	background-color: #ddd;

js/documents.js

@@ -86,6 +86,13 @@ var documentsMain = {
 					$(document.body).removeClass('claro');
 					$('title').text(documentsMain.UI.mainTitle);
 				});
+		},
+		showProgress : function(){
+			$('.documentslist .progress').show();
+		},
+		
+		hideProgress : function(){
+			$('.documentslist .progress').hide();
 		}
 	},
 	
@@ -283,10 +290,11 @@ var documentsMain = {
 		if (documentsMain.isGuest){
 			return;
 		}
-		
+		documentsMain.UI.showProgress();
 		jQuery.when(documentsMain.loadDocuments())
 			.then(function(){
 				documentsMain.renderDocuments();
+				documentsMain.UI.hideProgress();
 			});
 	},
 	
@@ -313,7 +321,7 @@ var documentsMain = {
 		hasDocuments = false;
 
 		//remove all but template
-		$('.documentslist .document:not(.template)').remove();
+		$('.documentslist .document:not(.template,.progress)').remove();
 
 		jQuery.each(this._documents, function(i,document){
 			var docElem = $('.documentslist .template').clone();

templates/documents.php

@@ -28,6 +28,8 @@
 				</form>
 			</div>
 		</li>
+		<li class="progress">
+		</li>
 		<li class="document template" data-id="" style="display:none;">
 			<a target="_blank" href=""><label></label></a>
 		</li>