From 3c3d17f53c815e4a99e6aca1f53e18d3d0e03333 Mon Sep 17 00:00:00 2001
From: forest <forest@tower>
Date: Thu, 23 Jan 2020 14:11:22 -0600
Subject: [PATCH 1/2] UX: XHR to prevent page from flickering

---
 excalibur/www/static/js/job.js         | 21 +++++++++++++++++++++
 excalibur/www/static/js/workspace.js   | 20 ++++++++++++++++++++
 excalibur/www/templates/job.html       |  4 ++--
 excalibur/www/templates/workspace.html |  4 ++--
 4 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/excalibur/www/static/js/job.js b/excalibur/www/static/js/job.js
index 2ce29d2..8e343c4 100644
--- a/excalibur/www/static/js/job.js
+++ b/excalibur/www/static/js/job.js
@@ -1,4 +1,25 @@
+const pollUntilServerIsReady = function () {
+  window.setInterval(() => {
+    const httpRequest = new XMLHttpRequest();
+    httpRequest.onloadend = () => {
+      if (httpRequest.status < 300) {
+        if(httpRequest.responseText.indexOf('__please-wait-symbol__') == -1) {
+          window.location.reload(true); 
+        }
+      } 
+    };
+    
+    httpRequest.open("GET", window.location);
+    httpRequest.send();
+  }, 1000);
+};
+
 $(document).ready(function () {
+
+  if(document.getElementById('__please-wait-symbol__') != null) {
+    pollUntilServerIsReady();
+  }
+
   var loc = window.location.pathname.split('/');
 
   $('#download').click(function () {
diff --git a/excalibur/www/static/js/workspace.js b/excalibur/www/static/js/workspace.js
index 88c30f9..ba6408f 100644
--- a/excalibur/www/static/js/workspace.js
+++ b/excalibur/www/static/js/workspace.js
@@ -14,6 +14,22 @@ const compare = function (a, b) {
   return a - b;
 }
 
+const pollUntilServerIsReady = function () {
+  window.setInterval(() => {
+    const httpRequest = new XMLHttpRequest();
+    httpRequest.onloadend = () => {
+      if (httpRequest.status < 300) {
+        if(httpRequest.responseText.indexOf('__please-wait-symbol__') == -1) {
+          window.location.reload(true); 
+        }
+      } 
+    };
+    
+    httpRequest.open("GET", window.location);
+    httpRequest.send();
+  }, 1000);
+};
+
 const getTableAreasForRender = function (page, detectedAreas) {
   const imageWidth = $('#image-{0}'.format(page)).width();
   const imageHeight = $('#image-{0}'.format(page)).height();
@@ -332,6 +348,10 @@ const debugQtyAreas = function (event, id, areas) {
 };
 
 $(document).ready(function () {
+  if(document.getElementById('__please-wait-symbol__') != null) {
+    pollUntilServerIsReady();
+  }
+  
   $('.image-area').selectAreas({
     onChanged: debugQtyAreas
   });
diff --git a/excalibur/www/templates/job.html b/excalibur/www/templates/job.html
index 7e0611e..04e803c 100644
--- a/excalibur/www/templates/job.html
+++ b/excalibur/www/templates/job.html
@@ -62,11 +62,11 @@ <h4>Extracted Data</h4>
     {% endfor %}
   </div>
 {% else %}
-  <meta http-equiv="refresh" content="0.5" >
   <div class="container">
     <div class="jumbotron">
-      <h1 class="display-4">Processing</h1>
+      <h1 class="display-4">Please Wait...</h1>
       <p class="lead">Please wait while the tables are extracted.</p>
+      <input type='hidden' id='__please-wait-symbol__'></input>
     </div>
   </div>
 {% endif %}
diff --git a/excalibur/www/templates/workspace.html b/excalibur/www/templates/workspace.html
index 91eb6a9..f56b1ef 100644
--- a/excalibur/www/templates/workspace.html
+++ b/excalibur/www/templates/workspace.html
@@ -159,11 +159,11 @@ <h6><a href="https://camelot-py.readthedocs.io/en/master/user/advanced.html" tar
       </div>
     </div>
   {% else %}
-    <meta http-equiv="refresh" content="0.5" >
     <div class="container">
       <div class="jumbotron">
-        <h1 class="display-4">Processing</h1>
+        <h1 class="display-4">Please Wait...</h1>
         <p class="lead">Please wait while the pages are converted to images.</p>
+        <input type='hidden' id='__please-wait-symbol__'></input>
       </div>
     </div>
   {% endif %}

From a792560e15442e31e0fc45f7ac79904eb3b07bfa Mon Sep 17 00:00:00 2001
From: forest <forest@tower>
Date: Thu, 23 Jan 2020 14:16:39 -0600
Subject: [PATCH 2/2] Set polling interval back to 0.5 seconds

---
 excalibur/www/static/js/job.js         | 2 +-
 excalibur/www/static/js/workspace.js   | 2 +-
 excalibur/www/templates/job.html       | 2 +-
 excalibur/www/templates/workspace.html | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/excalibur/www/static/js/job.js b/excalibur/www/static/js/job.js
index 8e343c4..0e391df 100644
--- a/excalibur/www/static/js/job.js
+++ b/excalibur/www/static/js/job.js
@@ -11,7 +11,7 @@ const pollUntilServerIsReady = function () {
     
     httpRequest.open("GET", window.location);
     httpRequest.send();
-  }, 1000);
+  }, 500);
 };
 
 $(document).ready(function () {
diff --git a/excalibur/www/static/js/workspace.js b/excalibur/www/static/js/workspace.js
index ba6408f..c023ae1 100644
--- a/excalibur/www/static/js/workspace.js
+++ b/excalibur/www/static/js/workspace.js
@@ -27,7 +27,7 @@ const pollUntilServerIsReady = function () {
     
     httpRequest.open("GET", window.location);
     httpRequest.send();
-  }, 1000);
+  }, 500);
 };
 
 const getTableAreasForRender = function (page, detectedAreas) {
diff --git a/excalibur/www/templates/job.html b/excalibur/www/templates/job.html
index 04e803c..279cca9 100644
--- a/excalibur/www/templates/job.html
+++ b/excalibur/www/templates/job.html
@@ -64,7 +64,7 @@ <h4>Extracted Data</h4>
 {% else %}
   <div class="container">
     <div class="jumbotron">
-      <h1 class="display-4">Please Wait...</h1>
+      <h1 class="display-4">Processing</h1>
       <p class="lead">Please wait while the tables are extracted.</p>
       <input type='hidden' id='__please-wait-symbol__'></input>
     </div>
diff --git a/excalibur/www/templates/workspace.html b/excalibur/www/templates/workspace.html
index f56b1ef..94a4157 100644
--- a/excalibur/www/templates/workspace.html
+++ b/excalibur/www/templates/workspace.html
@@ -161,7 +161,7 @@ <h6><a href="https://camelot-py.readthedocs.io/en/master/user/advanced.html" tar
   {% else %}
     <div class="container">
       <div class="jumbotron">
-        <h1 class="display-4">Please Wait...</h1>
+        <h1 class="display-4">Processing</h1>
         <p class="lead">Please wait while the pages are converted to images.</p>
         <input type='hidden' id='__please-wait-symbol__'></input>
       </div>