diff --git a/css/style.css b/css/style.css
index 50edb186..546ccc0e 100755
--- a/css/style.css
+++ b/css/style.css
@@ -104,3 +104,15 @@
 #mainContainer{
 	position:absolute;
 }
+
+#documents-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    filter:alpha(opacity=50);
+    opacity: 0.5;
+    z-index: 1000;
+	background: #000 url('%webroot%/core/img/loading-dark.gif') 50% 50% no-repeat;
+}
\ No newline at end of file
diff --git a/js/documents.js b/js/documents.js
index 450c6b3f..2136fb3b 100644
--- a/js/documents.js
+++ b/js/documents.js
@@ -78,6 +78,7 @@ var documentsMain = {
 				// load the document and get called back when it's live
 				documentsMain.webodfEditorInstance.openSession(response.es_id, memberId, function() {
 					documentsMain.webodfEditorInstance.startEditing();
+					documentsMain.hideOverlay();
 				});
 			});
 		});
@@ -164,6 +165,12 @@ var documentsMain = {
 // 			});
 		});
 	},
+	showOverlay : function(){
+		$('<div id="documents-overlay"> </div>').hide().appendTo(document.body).fadeIn('slow');
+	},
+	hideOverlay : function(){
+		$('#documents-overlay').fadeOut('slow');
+	},
 	loadDocuments: function () {
 		var self = this;
 		var def = new $.Deferred();
@@ -252,7 +259,8 @@ $(document).ready(function() {
 			return;
 		}
 		documentsMain.isEditorMode = true;
-		
+		documentsMain.showOverlay();
+
 		if ($(this).attr('data-esid')){
 			documentsMain.joinSession($(this).attr('data-esid'));
 		} else if ($(this).attr('data-id')){