From e9075e24e16e64b2116f66dab9cf59cb7ee01361 Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Wed, 18 Nov 2020 20:06:02 -0500
Subject: [PATCH] Update progress indicator styles (#1042)

---
 ext/bg/search.html        |  3 +-
 ext/fg/float.html         |  3 +-
 ext/mixed/css/display.css | 85 +++++++++++++++++++++++++++++++++++++++
 ext/mixed/js/display.js   | 21 ++++++++--
 4 files changed, 105 insertions(+), 7 deletions(-)
diff --git a/ext/bg/search.html b/ext/bg/search.html
index 959979d9..7ba479ba 100644
--- a/ext/bg/search.html
+++ b/ext/bg/search.html
@@ -17,6 +17,7 @@
 <body>
 
 <div class="content scrollbar" id="content"><div class="content-body" id="content-body">
+    <div class="top-progress-bar-container"><div class="progress-bar-indeterminant" id="progress-indicator" hidden></div></div>
     <div class="content-body-inner">
 
         <span tabindex="-1" id="content-scroll-focus"></span>
@@ -46,8 +47,6 @@
             </div>
         </div>
 
-        <div id="spinner" hidden><img src="/mixed/img/spinner.gif"></div>
-
         <div class="scan-disable" id="query-parser-container">
             <div id="query-parser-content"></div>
         </div>
diff --git a/ext/fg/float.html b/ext/fg/float.html
index 174cfe42..0ee8fd7d 100644
--- a/ext/fg/float.html
+++ b/ext/fg/float.html
@@ -17,12 +17,11 @@
 
 <div class="content-outer">
 <div class="content scrollbar" id="content"><div class="content-body" id="content-body">
+    <div class="top-progress-bar-container"><div class="progress-bar-indeterminant" id="progress-indicator" hidden></div></div>
     <div class="content-body-inner">
 
         <span tabindex="-1" id="content-scroll-focus"></span>
 
-        <div id="spinner" hidden><img src="/mixed/img/spinner.gif"></div>
-
         <div class="scan-disable" id="query-parser-container" hidden>
             <div class="search-option" id="query-parser-mode-container" hidden>
                 <select id="query-parser-mode-select"></select>
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index 09fc5703..24d143fc 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -45,6 +45,12 @@
     --sidebar-button-icon-size-no-units: 16;
     --sidebar-button-icon-size: calc(1em * (var(--sidebar-button-icon-size-no-units) / var(--font-size-no-units)));
 
+    --progress-bar-height-no-units: 4;
+    --progress-bar-height: calc(1em * (var(--progress-bar-height-no-units) / var(--font-size-no-units)));
+    --progress-bar-active-transition-duration: 0.125s;
+    --progress-bar-active-transition-start-delay: 0.0625s;
+    --progress-bar-animation-duration: 2s;
+
     /* Colors */
     --background-color: #ffffff;
     --glossary-image-background-color: #eeeeee;
@@ -88,6 +94,9 @@
 
     --scrollbar-thumb-color: #c1c1c1;
     --scrollbar-track-color: #f1f1f1;
+
+    --progress-bar-track-color: #cccccc;
+    --progress-bar-indicator-color: #0275d8;
 }
 :root[data-yomichan-theme=dark] {
     /* Colors */
@@ -133,6 +142,9 @@
 
     --scrollbar-thumb-color: #444444;
     --scrollbar-track-color: #2f2f2f;
+
+    --progress-bar-track-color: #3a3a3a;
+    --progress-bar-indicator-color: #0275d8;
 }
 
 
@@ -1004,3 +1016,76 @@ button.action-button {
 .kanji-glossary {
     color: var(--dark-text-color);
 }
+
+
+/* Progress bar */
+@keyframes progress-bar-indeterminant1a {
+    0% { left: 0; }
+    25% { left: 0; }
+    75% { left: 100%; }
+    100% { left: 100%; }
+}
+@keyframes progress-bar-indeterminant1b {
+    0% { right: 100%; }
+    50% { right: 0; }
+    100% { right: 0; }
+}
+@keyframes progress-bar-indeterminant2a {
+    0% { left: 0; }
+    25% { left: 0; }
+    100% { left: 100%; }
+}
+@keyframes progress-bar-indeterminant2b {
+    0% { right: 100%; }
+    75% { right: 0; }
+    100% { right: 0; }
+}
+.progress-bar-indeterminant {
+    display: block;
+    width: 100%;
+    height: 0;
+    background-color: var(--progress-bar-indicator-color);
+    position: relative;
+    transition:
+        height var(--progress-bar-active-transition-duration) linear var(--progress-bar-active-transition-duration),
+        background-color var(--progress-bar-active-transition-duration) linear;
+}
+.progress-bar-indeterminant[data-active=true] {
+    height: var(--progress-bar-height);
+    background-color: var(--progress-bar-track-color);
+    transition:
+        height var(--progress-bar-active-transition-duration) linear var(--progress-bar-active-transition-start-delay),
+        background-color 0s linear;
+}
+.progress-bar-indeterminant[hidden]:not([data-active=true]) {
+    display: none;
+}
+.progress-bar-indeterminant::before,
+.progress-bar-indeterminant::after {
+    content: "";
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 100%;
+    background-color: var(--progress-bar-indicator-color);
+    animation: none;
+}
+.progress-bar-indeterminant:not([hidden])::before {
+    animation:
+        progress-bar-indeterminant1a var(--progress-bar-animation-duration) infinite ease-in-out var(--progress-bar-active-transition-start-delay),
+        progress-bar-indeterminant1b var(--progress-bar-animation-duration) infinite ease-in-out var(--progress-bar-active-transition-start-delay);
+}
+.progress-bar-indeterminant:not([hidden])::after {
+    animation:
+        progress-bar-indeterminant2a var(--progress-bar-animation-duration) infinite ease-in-out calc(var(--progress-bar-active-transition-start-delay) + 0.375 * var(--progress-bar-animation-duration)),
+        progress-bar-indeterminant2b var(--progress-bar-animation-duration) infinite ease-in-out calc(var(--progress-bar-active-transition-start-delay) + 0.375 * var(--progress-bar-animation-duration));
+}
+.top-progress-bar-container {
+    position: sticky;
+    top: 0;
+    height: 0;
+    pointer-events: none;
+    z-index: 10;
+}
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index cdff9389..7068d424 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -34,7 +34,6 @@
 class Display extends EventDispatcher {
     constructor() {
         super();
-        this._spinner = document.querySelector('#spinner');
         this._container = document.querySelector('#definitions');
         this._definitions = [];
         this._optionsContext = {depth: 0, url: window.location.href};
@@ -69,6 +68,8 @@ class Display extends EventDispatcher {
         this._defaultTitleMaxLength = 1000;
         this._fullQuery = '';
         this._documentUtil = new DocumentUtil();
+        this._progressIndicator = document.querySelector('#progress-indicator');
+        this._progressIndicatorTimer = null;
         this._progressIndicatorVisible = new DynamicProperty(false);
         this._queryParserVisible = false;
         this._queryParserVisibleOverride = null;
@@ -563,8 +564,22 @@ class Display extends EventDispatcher {
     }
 
     _onProgressIndicatorVisibleChanged({value}) {
-        if (this._spinner === null) { return; }
-        this._spinner.hidden = !value;
+        if (this._progressIndicatorTimer !== null) {
+            clearTimeout(this._progressIndicatorTimer);
+            this._progressIndicatorTimer = null;
+        }
+
+        if (value) {
+            this._progressIndicator.hidden = false;
+            getComputedStyle(this._progressIndicator).getPropertyValue('display'); // Force update of CSS display property, allowing animation
+            this._progressIndicator.dataset.active = 'true';
+        } else {
+            this._progressIndicator.dataset.active = 'false';
+            this._progressIndicatorTimer = setTimeout(() => {
+                this._progressIndicator.hidden = true;
+                this._progressIndicatorTimer = null;
+            }, 250);
+        }
     }
 
     _onWindowFocus() {
