Ajax loader helper

Added disableLoader & loaderClassname attribute to views, for showing ajax spinners. Included default class and spinner image.
Added the loader to app-container as well, to run on the whole page while the routeObjects load.

fixes #1802

3 files changed, 23 insertions, 4 deletions

diff --git a/src/fauxton/app/api.js b/src/fauxton/app/api.js
index e13a41dcc..58c413d30 100644
--- a/src/fauxton/app/api.js
+++ b/src/fauxton/app/api.js
@@ -46,6 +46,10 @@ function(app, Fauxton) {
       return null;
     },
 
+    loaderClassname: 'loader',
+
+    disableLoader: false,
+
     hasRendered: function () {
       return !!this.__manager__.hasRendered;
     },
@@ -234,6 +238,8 @@ function(app, Fauxton) {
     crumbs: [],
     layout: "with_sidebar",
     apiUrl: null,
+    disableLoader: false,
+    loaderClassname: 'loader',
     renderedState: false,
     establish: function() {},
     route: function() {},
@@ -252,6 +258,11 @@ function(app, Fauxton) {
         masterLayout.setTemplate(this.layout);
       }
 
+      //add page loader. "app-container" shouldn't be overwritten. Even if a new index.underscore is provided in settings.json
+      if (!this.disableLoader) {
+        $('#app-container').addClass(this.loaderClassname);
+      }
+
       masterLayout.clearBreadcrumbs();
       var crumbs = this.get('crumbs');
 
@@ -262,14 +273,17 @@ function(app, Fauxton) {
       }
 
       FauxtonAPI.when(this.establish()).done(function(resp) {
+        if (!this.disableLoader) {
+          $('#app-container').removeClass(this.loaderClassname);
+        }
         _.each(routeObject.getViews(), function(view, selector) {
           if(view.hasRendered()) { return; }
-
+          if (!view.disableLoader){ $(selector).addClass(view.loaderClassname);}
           masterLayout.setView(selector, view);
-
           FauxtonAPI.when(view.establish()).then(function(resp) {
+            if (!view.disableLoader) $(selector).removeClass(view.loaderClassname);
             masterLayout.renderView(selector);
-          }, function(resp) {
+            }, function(resp) {
             view.establishError = {
               error: true,
               reason: resp
@@ -286,7 +300,7 @@ function(app, Fauxton) {
             }
           });
         });
-      });
+      }.bind(this));
 
       if (this.get('apiUrl')) masterLayout.apiBar.update(this.get('apiUrl'));
 
diff --git a/src/fauxton/assets/img/loader.gif b/src/fauxton/assets/img/loader.gif
new file mode 100644
index 000000000..96ff18821
--- /dev/null
+++ b/src/fauxton/assets/img/loader.gif
diff --git a/src/fauxton/assets/less/fauxton.less b/src/fauxton/assets/less/fauxton.less
index 0bbde28a1..445b815a2 100644
--- a/src/fauxton/assets/less/fauxton.less
+++ b/src/fauxton/assets/less/fauxton.less
@@ -93,3 +93,8 @@ pre.view-code-error {
   height: auto;
   min-height: 50px;
 }
+
+.loader {
+  background: url('../img/loader.gif') center center no-repeat;
+  min-height:  100px;
+}