From 06767271bfe703e07d41f54598c4d325be472848 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Tue, 3 Mar 2020 18:36:23 +0100
Subject: [PATCH] Added a discrete indeterminate progress indicator following
 the mouse cursor to signal outstanding API requests.

---
 .../src/js/misc/wb-apply-promise-ordering.js  | 49 ++++++++++++++++++-
 1 file changed, 48 insertions(+), 1 deletion(-)

diff --git a/frontend/src/js/misc/wb-apply-promise-ordering.js b/frontend/src/js/misc/wb-apply-promise-ordering.js
index 161b0db..855ebb9 100644
--- a/frontend/src/js/misc/wb-apply-promise-ordering.js
+++ b/frontend/src/js/misc/wb-apply-promise-ordering.js
@@ -1,12 +1,56 @@
 const defaultOrderRegistry = {};
 
+/* function notify(orderRegistry) {
+  if (!('listeners' in orderRegistry))
+    return;
+  for (let k in orderRegistry.listeners) {
+    orderRegistry.listeners[k](orderRegistry);
+  }
+} */
+
+function cursorDecor() {
+  let d = $('#cursor-decor');
+  if (d.length === 1)
+    return $(d[0]);
+  d = $('<div id="cursor-decor" style="z-index: 10000; position: absolute; left: 10px; top: 10px;"> \
+      <div class="progress" style="height: 8px;"> \
+        <div class="progress-bar progress-bar-striped progress-bar-animated" \
+          role="progressbar" aria-valuenow="100" aria-valuemin="0" \
+          aria-valuemax="100" style="width: 32px;"></div> \
+      </div> \
+    </div>');
+  $(document.body).append(d);
+  let pageX = 0, pageY = 0, scrollX = 0, scrollY = 0;
+  document.addEventListener('mousemove', e => {
+    pageX = e.pageX;
+    pageY = e.pageY;
+    d.css({ left: (e.pageX + 16) + 'px', top: (e.pageY + 16) + 'px' })
+    scrollX = window.scrollX;
+    scrollY = window.scrollY;
+  });
+  document.addEventListener('scroll', e => {
+    d.css({ left: (pageX + window.scrollX - scrollX + 16) + 'px',
+      top: (pageY + window.scrollY - scrollY + 16) + 'px' });
+  });
+  return d;
+}
+
+function updateCursorDecor(orderRegistry) {
+  const d = cursorDecor();
+  if (Object.keys(orderRegistry.pendingCompletion).length === 0)
+    d.hide();
+  else
+    d.show();
+}
+
 function wbApplyPromiseOrdering(prom, orderRegistry) {
   let orderId;
 
   if (!orderRegistry)
     orderRegistry = defaultOrderRegistry;
 
-  if (Object.keys(orderRegistry).length === 0) {
+  //if (Object.keys(orderRegistry).length === 0) {
+  if (!('started' in orderRegistry)) {
     orderRegistry.started = 0;
     orderRegistry.pendingCompletion = {};
     orderRegistry.completed = { 0: true };
@@ -15,6 +59,8 @@ function wbApplyPromiseOrdering(prom, orderRegistry) {
   orderRegistry.started += 1;
   orderId = orderRegistry.started;
   // console.log('New orderId: ' + orderId);
+  // notify(orderRegistry);
+  cursorDecor().show();
 
   const orderCallback = ((isCatch, payload) => {
     // console.log('orderId: ' + orderId +
@@ -41,6 +87,7 @@ function wbApplyPromiseOrdering(prom, orderRegistry) {
         // console.log('Garbage collect');
         orderRegistry.started = 0;
         orderRegistry.completed = { 0: true };
+        cursorDecor().hide();
       }
 
       if (isCatch)