3 files changed, 42 insertions, 34 deletions
diff --git a/web-ui/app/index.html b/web-ui/app/index.html
index 16521d37..7e3189a2 100644
--- a/web-ui/app/index.html
+++ b/web-ui/app/index.html
@@ -15,8 +15,9 @@
 <body>
 
 <div class="off-canvas-wrap" data-offcanvas>
-  <header id="main">
-    <div id="user-alerts"></div>
+  <header id="main" >
+    <div id="user-alerts" class="message-panel"></div>
+    <div id="loading" class="message-panel"><span>Loading...</span></div>
   </header>
 
   <div class="inner-wrap">
diff --git a/web-ui/app/js/helpers/monitored_ajax.js b/web-ui/app/js/helpers/monitored_ajax.js
index 3f5ff2fe..0ec92901 100644
--- a/web-ui/app/js/helpers/monitored_ajax.js
+++ b/web-ui/app/js/helpers/monitored_ajax.js
@@ -16,36 +16,43 @@
  */
 /*global _ */
 
-define(
-  ['page/events',
-   'views/i18n'],
-  function(events, i18n) {
-    
-    'use strict';
-
-    function monitoredAjax(on, url, config) {
-      if (config) {
-        config.timeout = 60*1000;
+define(['page/events', 'views/i18n'], function (events, i18n) {
+
+  'use strict';
+
+  var messages = {
+    timeout: 'a timeout occurred',
+    error: 'problems talking to server',
+    parseerror: 'got invalid response from server'
+  };
+
+  function monitoredAjax(on, url, config) {
+    config = config || {};
+    config.timeout = 60 * 1000;
+
+    var originalBeforeSend = config.beforeSend;
+    config.beforeSend = function () {
+      $('#loading').show();
+      if (originalBeforeSend) {
+        originalBeforeSend();
+      }
+    };
+
+    var originalComplete = config.complete;
+    config.complete = function () {
+      $('#loading').hide();
+      if (originalComplete) {
+        originalComplete();
       }
-      return $.ajax(url, config).fail(function(xmlhttprequest, textstatus, message) {
-        var msg = '';
-        switch (textstatus) {
-          case 'timeout':
-            msg = 'a timeout occurred';
-            break;
-          case 'error':
-            msg = 'problems talking to server';
-            break;
-          case 'parseerror':
-            msg = 'got invalid response from server';
-            break;
-          default:
-            msg = 'unexpected problem while talking to server';
-        }
-        on.trigger(document, events.ui.userAlerts.displayMessage, { message: i18n(msg) });
-      }.bind(this));  
-    }
-
-    return monitoredAjax;
+    };
+
+    return $.ajax(url, config).fail(function (xmlhttprequest, textstatus, message) {
+      var msg = messages[textstatus] || 'unexpected problem while talking to server';
+      on.trigger(document, events.ui.userAlerts.displayMessage, { message: i18n(msg) });
+    }.bind(this));
+
   }
-);
+
+  return monitoredAjax;
+
+});
diff --git a/web-ui/app/scss/_alerts.scss b/web-ui/app/scss/_alerts.scss
index 16171fd7..bd1210df 100644
--- a/web-ui/app/scss/_alerts.scss
+++ b/web-ui/app/scss/_alerts.scss
@@ -1,4 +1,4 @@
-#user-alerts {
+.message-panel {
   width: 100%;
   margin: 10px auto;
   position: fixed;