From c16349d5c33eeb244a7bb314ea88f5df9e08ac65 Mon Sep 17 00:00:00 2001
From: Lance Edgar <lance@edbob.org>
Date: Fri, 20 Sep 2019 17:26:33 -0500
Subject: [PATCH] Fix progress page so it effectively fetches progress data
 synchronously

i.e. use `setTimeout()` instead of `setInterval()` and only set next timeout
after previous fetch has succeeded
---
 tailbone/templates/progress.mako | 70 ++++++++++++++++++++------------
 1 file changed, 44 insertions(+), 26 deletions(-)

diff --git a/tailbone/templates/progress.mako b/tailbone/templates/progress.mako
index ce118f9e..331e8e1a 100644
--- a/tailbone/templates/progress.mako
+++ b/tailbone/templates/progress.mako
@@ -16,16 +16,19 @@
     ${self.extra_styles()}
     <script type="text/javascript">
 
-      var updater = null;
+      var stillInProgress = true;
 
-      updater = setInterval(function() {update_progress()}, 1000);
+      // fetch first progress data, one second from now
+      setTimeout(function() {
+          update_progress();
+      }, 1000);
 
       % if can_cancel:
       $(function() {
 
           $('#cancel button').click(function() {
               if (confirm("Do you really wish to cancel this operation?")) {
-                  clearInterval(updater);
+                  stillInProgress = false;
                   $(this).button('disable').button('option', 'label', "Canceling, please wait...");
                   $.ajax({
                       url: '${url('progress.cancel', key=progress.key)}?sessiontype=${progress.session.type}',
@@ -84,36 +87,51 @@
       function update_progress() {
           $.ajax({
               url: '${url('progress', key=progress.key)}?sessiontype=${progress.session.type}',
+
               success: function(data) {
+
                   if (data.error) {
+                      // errors stop the show, we redirect to "cancel" page
                       location.href = '${cancel_url}';
-                  } else if (data.complete || data.maximum) {
-                      $('#message').html(data.message);
-                      $('#total').html('('+data.maximum_display+' total)');
-                      % if can_cancel:
-                      $('#cancel button').show();
-                      % endif
-                      if (data.complete) {
-                          clearInterval(updater);
+
+                  } else {
+                      if (data.complete || data.maximum) {
+                          $('#message').html(data.message);
+                          $('#total').html('('+data.maximum_display+' total)');
                           % if can_cancel:
-                          $('#cancel button').hide();
+                          $('#cancel button').show();
                           % endif
-                          $('#total').html('done!');
-                          $('#complete').css('width', '100%');
-                          $('#remaining').hide();
-                          $('#percentage').html('100 %');
-                          location.href = data.success_url;
-                      } else {
-                          var width = parseInt(data.value) / parseInt(data.maximum);
-                          width = Math.round(100 * width);
-                          if (width) {
-                              $('#complete').css('width', width+'%');
-                              $('#percentage').html(width+' %');
+                          if (data.complete) {
+                              stillInProgress = false;
+                              % if can_cancel:
+                              $('#cancel button').hide();
+                              % endif
+                              $('#total').html('done!');
+                              $('#complete').css('width', '100%');
+                              $('#remaining').hide();
+                              $('#percentage').html('100 %');
+                              location.href = data.success_url;
+
                           } else {
-                              $('#complete').css('width', '0.01%');
-                              $('#percentage').html('0 %');
+                              // got progress data, so update display
+                              var width = parseInt(data.value) / parseInt(data.maximum);
+                              width = Math.round(100 * width);
+                              if (width) {
+                                  $('#complete').css('width', width+'%');
+                                  $('#percentage').html(width+' %');
+                              } else {
+                                  $('#complete').css('width', '0.01%');
+                                  $('#percentage').html('0 %');
+                              }
+                              $('#remaining').css('width', 'auto');
                           }
-                          $('#remaining').css('width', 'auto');
+                      }
+
+                      if (stillInProgress) {
+                          // fetch progress data again, in one second from now
+                          setTimeout(function() {
+                              update_progress();
+                          }, 1000);
                       }
                   }
               },