Add a spinner to the Downlaod button, as it may take a long time.

Goutte
1 parent 9c314ef2
Showing 1 changed file with 21 additions and 1 deletions Show diff stats
web/view/home.html.jinja2
@@ -162,6 +162,7 @@
                   class="mdl-button mdl-button--raised mdl-button--primary"
                   title="Download the raw data for each selected target and parameters.">
             Download
+            <div id="download_spinner" class="mdl-spinner mdl-js-spinner is-active"></div>
           </button>
           <button id="samp"
                   class="samp mdl-button mdl-button--raised mdl-button--primary mdl-button--disabled"
@@ -346,6 +347,14 @@
       background-color: #c8d3e1;
     }
+    #download_spinner {
+      display: none;
+      top:  2px;
+      left: 4px;
+      width:  14px;
+      height: 14px;
+    }
+
     {# CSS Spinners #}
     #plots_loader {
@@ -665,15 +674,26 @@ jQuery().ready(function($){
     window.location = "?input_slug="+new_input_slug;
     return false;
   });
+  var download_spinner = $('#download_spinner');
+  var waiting_for_download = false;
   $('#download').on("click", function(e){
+    if (waiting_for_download) return;
+    download_spinner.css('display', 'inline-block');
+    waiting_for_download = true;
     var url = sw.buildDownloadUrl();
     console.info("Downloading " + url);
     $.ajax({
       type: 'GET',
       url: url,
       processData: false,
-      success: function (data) { window.location = url; },
+      success: function (data) {
+        download_spinner.css('display', 'none');
+        waiting_for_download = false;
+        window.location = url;
+      },
       error: function (xhr) {
+        download_spinner.css('display', 'none');
+        waiting_for_download = false;
         console.error('Cannot download.', xhr);
         alert("Our apologies, there was an error while downloading.");
       }