Introduce a progress bar for the rate limiter (closes #14)

website/src/queries-init.js

@@ -11,7 +11,7 @@ const UF_TABLE_SEPARATOR  = "｜";
 const UF_MSG_ERROR        = "There seems to have been an error.<br>"
     + "Maybe you had a typo in the provided input? Or the Access Token credentials are invalid?<br>"
     + "If the scan is continuing, ignore this: the GitHub API some times returns erroneous data.";
-const UF_MSG_SLOWER       = "The scan is slowing down (and will stall for a little while) due to the high amount of requests.<br>"
+const UF_MSG_SLOWER       = "The scan will stall for a little while due to the high amount of requests.<br>"
     + "(This is to prevent GitHub API from refusing to respond due to thinking those requests are malicious.)";
 const UF_MSG_API_RATE     = "<b>GitHub API rate-limits exceeded.</b> Consider providing an <b>Access Token</b> if you haven't already (click the button at the top-right).<br>"
     + "The amount of API calls you are allowed to do will re-accumulate over time: you can try again later on.<br>"
@@ -107,6 +107,7 @@ function clearMsg() {
     .empty()
     .removeClass("box")
     .css("border-style", "");
+  removeProgressBar();
 }
 function clearNonErrorMsg() {
   const msg = JQ_ID_MSG.html();
@@ -120,6 +121,13 @@ function clearHeader() {
   JQ_ID_HEADER.empty();
 }
 
+function getJq_ProgressBar() {
+  return $(".progress");
+}
+function removeProgressBar() {
+  getJq_ProgressBar().remove();
+}
+
 /* Search Query Fields */
 function enableQueryFields() {
   JQ_REPO_FIELD.prop('disabled', false);

website/src/queries-logic.js

@@ -217,6 +217,8 @@ function request_fork_page(page_number, user, repo, defaultBranch) {
     page: page_number
   });
   const onSuccess = (responseHeaders, responseData) => {
+    removeProgressBar();
+
     if (isEmpty(responseData)) // repo has not been forked
       return;
 
@@ -338,9 +340,25 @@ function setUpOctokitWithLatestToken() {
           return true; // true = retry
         }
       },
-      onSecondaryRateLimit: (retryAfter, options, octokit) => {
+      onSecondaryRateLimit: (retryAfter, options, octokit) => { // slow down
         setMsg(UF_MSG_SLOWER);
-        return true; // true = automatically retry after given amount of seconds (usually 60)
+
+        // setup the progress bar
+        if (!getJq_ProgressBar()[0]) { // only if it isn't displayed yet
+          JQ_ID_MSG.after(`<progress class="progress is-small" value="${retryAfter}" max="${retryAfter}">some%</progress>`);
+          getJq_ProgressBar().animate(
+            {value: "0"}, // target for the "value" attribute
+            {
+                duration: 1000 * retryAfter, // in ms
+                easing: 'linear',
+                done: function() {
+                    getJq_ProgressBar().removeAttr('value'); // for moving bar
+                }
+            }
+          );
+        }
+
+        return true; // true = automatically retry after given amount of seconds (usually 1 min)
       }
     }
   });