Use an overridable property to control progress indicator visibility (#1041)

2 files changed, 24 insertions, 24 deletions

diff --git a/ext/bg/js/query-parser.js b/ext/bg/js/query-parser.js
index f56c2ecc..3217316d 100644
--- a/ext/bg/js/query-parser.js
+++ b/ext/bg/js/query-parser.js
@@ -21,10 +21,10 @@
  */
 
 class QueryParser extends EventDispatcher {
-    constructor({getOptionsContext, setSpinnerVisible, documentUtil}) {
+    constructor({getOptionsContext, progressIndicatorVisible, documentUtil}) {
         super();
         this._getOptionsContext = getOptionsContext;
-        this._setSpinnerVisible = setSpinnerVisible;
+        this._progressIndicatorVisible = progressIndicatorVisible;
         this._selectedParser = null;
         this._documentUtil = documentUtil;
         this._parseResults = [];
@@ -63,17 +63,18 @@ class QueryParser extends EventDispatcher {
     }
 
     async setText(text) {
-        this._setSpinnerVisible(true);
+        const overrideToken = this._progressIndicatorVisible.setOverride(true);
+        try {
+            this._setPreview(text);
 
-        this._setPreview(text);
+            this._parseResults = await api.textParse(text, this._getOptionsContext());
+            this._refreshSelectedParser();
 
-        this._parseResults = await api.textParse(text, this._getOptionsContext());
-        this._refreshSelectedParser();
-
-        this._renderParserSelect();
-        this._renderParseResult();
-
-        this._setSpinnerVisible(false);
+            this._renderParserSelect();
+            this._renderParseResult();
+        } finally {
+            this._progressIndicatorVisible.clearOverride(overrideToken);
+        }
     }
 
     // Private
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index 2ee5b608..cdff9389 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -69,12 +69,13 @@ class Display extends EventDispatcher {
         this._defaultTitleMaxLength = 1000;
         this._fullQuery = '';
         this._documentUtil = new DocumentUtil();
+        this._progressIndicatorVisible = new DynamicProperty(false);
         this._queryParserVisible = false;
         this._queryParserVisibleOverride = null;
         this._queryParserContainer = document.querySelector('#query-parser-container');
         this._queryParser = new QueryParser({
             getOptionsContext: this.getOptionsContext.bind(this),
-            setSpinnerVisible: this.setSpinnerVisible.bind(this),
+            progressIndicatorVisible: this._progressIndicatorVisible,
             documentUtil: this._documentUtil
         });
         this._mode = null;
@@ -182,6 +183,7 @@ class Display extends EventDispatcher {
             ['popupMessage', {async: 'dynamic', handler: this._onDirectMessage.bind(this)}]
         ]);
         window.addEventListener('focus', this._onWindowFocus.bind(this), false);
+        this._progressIndicatorVisible.on('change', this._onProgressIndicatorVisibleChanged.bind(this));
     }
 
     initializeState() {
@@ -337,12 +339,6 @@ class Display extends EventDispatcher {
         return document.title;
     }
 
-    setSpinnerVisible(visible) {
-        if (this._spinner !== null) {
-            this._spinner.hidden = !visible;
-        }
-    }
-
     registerActions(actions) {
         for (const [name, handler] of actions) {
             this._actions.set(name, handler);
@@ -566,6 +562,11 @@ class Display extends EventDispatcher {
         this._nextTermView();
     }
 
+    _onProgressIndicatorVisibleChanged({value}) {
+        if (this._spinner === null) { return; }
+        this._spinner.hidden = !value;
+    }
+
     _onWindowFocus() {
         const target = this._contentScrollFocusElement;
         if (target === null) { return; }
@@ -1133,9 +1134,8 @@ class Display extends EventDispatcher {
     }
 
     async _noteAdd(definition, mode) {
+        const overrideToken = this._progressIndicatorVisible.setOverride(true);
         try {
-            this.setSpinnerVisible(true);
-
             const noteContext = await this._getNoteContext();
             const noteId = await this._addDefinition(definition, mode, noteContext);
             if (noteId) {
@@ -1151,14 +1151,13 @@ class Display extends EventDispatcher {
         } catch (e) {
             this.onError(e);
         } finally {
-            this.setSpinnerVisible(false);
+            this._progressIndicatorVisible.clearOverride(overrideToken);
         }
     }
 
     async _audioPlay(definition, expressionIndex, entryIndex) {
+        const overrideToken = this._progressIndicatorVisible.setOverride(true);
         try {
-            this.setSpinnerVisible(true);
-
             const {expression, reading} = expressionIndex === -1 ? definition : definition.expressions[expressionIndex];
 
             this._stopPlayingAudio();
@@ -1204,7 +1203,7 @@ class Display extends EventDispatcher {
         } catch (e) {
             this.onError(e);
         } finally {
-            this.setSpinnerVisible(false);
+            this._progressIndicatorVisible.clearOverride(overrideToken);
         }
     }