diff options
Diffstat (limited to 'ext/mixed/js')
| -rw-r--r-- | ext/mixed/js/display.js | 21 |
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() { |