SAAS-1039 - add processing overlay to listener stats screen

airtime_mvc/public/css/styles.css

@@ -3738,6 +3738,12 @@ button.btn-icon-text > i.icon-white {
     font-size: 12px;
 }
 
+#flot_placeholder.processing {
+    width: 100%;
+    height: 100%;
+    background: url("img/loading.gif") no-repeat 50% 50% rgba(0, 0, 0, .25);
+}
+
 .dashboard-btn {
     width: 50%;
 }

airtime_mvc/public/js/airtime/listenerstat/listenerstat.js

@@ -21,7 +21,17 @@ $(document).ready(function() {
     });
 });
 
-function getDataAndPlot(startTimestamp, endTimestamp){
+/**
+ * Toggle a spinner overlay so the user knows the page is processing
+ */
+function toggleOverlay() {
+    $('#flot_placeholder').toggleClass('processing');
+}
+
+function getDataAndPlot(startTimestamp, endTimestamp) {
+    // Turn on the processing overlay
+    toggleOverlay();
+
     // get data
     $.get(baseUrl+'Listenerstat/get-data', {start: startTimestamp, end: endTimestamp}, function(data){
         out = new Object();
@@ -37,6 +47,8 @@ function getDataAndPlot(startTimestamp, endTimestamp){
             out[mpName] = plotData;
         });
         plot(out);
+        // Turn off the processing overlay
+        toggleOverlay();
     })
 }