summaryrefslogtreecommitdiff
path: root/ext/mixed/js/display.js
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2020-11-18 20:06:02 -0500
committerGitHub <noreply@github.com>2020-11-18 20:06:02 -0500
commite9075e24e16e64b2116f66dab9cf59cb7ee01361 (patch)
tree5fb11a9eb4d38afd4130d4ca6f7f1bd4708637a2 /ext/mixed/js/display.js
parenta48ac37815016c820b2b2a7e79788fed07ae191f (diff)
Update progress indicator styles (#1042)
Diffstat (limited to 'ext/mixed/js/display.js')
-rw-r--r--ext/mixed/js/display.js21
1 files changed, 18 insertions, 3 deletions
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() {