show loading spinner when loading table

attachments/pages/index.html

@@ -32,6 +32,7 @@
       <div class="project-actions"></div>
       <div class="project-controls"></div>
     </div>
+    <img src="images/large-spinner.gif" class="large-loader" style="display: none;">
 		<div class="main_content"></div>
 	</div>
 	

attachments/script/costco.js

@@ -62,8 +62,9 @@ var costco = function() {
   
   function updateDocs(editFunc) {
     var dfd = $.Deferred();
-    util.notify("Updating documents...", {persist: true, loader: true});
+    util.notify("Download entire database into Recline. This could take a while...", {persist: true, loader: true});
     couch.request({url: app.baseURL + "api/json"}).then(function(docs) {
+      util.notify("Updating " + docs.docs.length + " documents. This could take a while...", {persist: true, loader: true});
       var toUpdate = costco.mapDocs(docs.docs, editFunc).edited;
       costco.uploadDocs(toUpdate).then(
         function(updatedDocs) { 

attachments/script/recline.js

@@ -183,7 +183,9 @@ var recline = function() {
   }
   
   function initializeTable(offset) {
+    $('.large-loader').show();
     couch.request({url: app.baseURL + 'api/headers'}).then(function ( headers ) {
+      $('.large-loader').hide();
       app.headers = headers;
       app.csvUrl = app.baseURL + 'api/csv?headers=' + escape(JSON.stringify(headers));
       

attachments/style/style.css

@@ -42,6 +42,7 @@ a.button:hover span.icon.loading { background-image: url(images/loader-blue.gif)
 #couchLogo {float: left; margin-right: 5px; margin-top: 3px}
 .chosen {border: 1px solid green}
 .info { padding: 0px 0px 10px 0px}
+.large-loader { position: absolute; top: 200px; left: 50%; z-index: 666;}
 .menu-overlay {
   position: fixed;
   top: 0;