Add a delay before showing the loading state

Intended to prevent flickering when startup is quick
This commit is contained in:
toasted-nutbread 2020-04-11 20:53:18 -04:00
parent c9704b5c5e
commit 5c5c70326d

View File

@ -77,6 +77,7 @@ class Backend {
this._defaultBrowserActionTitle = null; this._defaultBrowserActionTitle = null;
this._isPrepared = false; this._isPrepared = false;
this._badgePrepareDelayTimer = null;
this._messageHandlers = new Map([ this._messageHandlers = new Map([
['yomichanCoreReady', {handler: this._onApiYomichanCoreReady.bind(this), async: false}], ['yomichanCoreReady', {handler: this._onApiYomichanCoreReady.bind(this), async: false}],
@ -123,6 +124,10 @@ class Backend {
async prepare() { async prepare() {
this._defaultBrowserActionTitle = await this._getBrowserIconTitle(); this._defaultBrowserActionTitle = await this._getBrowserIconTitle();
this._badgePrepareDelayTimer = setTimeout(() => {
this._badgePrepareDelayTimer = null;
this._updateBadge();
}, 1000);
this._updateBadge(); this._updateBadge();
await this.database.prepare(); await this.database.prepare();
await this.translator.prepare(); await this.translator.prepare();
@ -158,6 +163,11 @@ class Backend {
const callback = () => this.checkLastError(chrome.runtime.lastError); const callback = () => this.checkLastError(chrome.runtime.lastError);
chrome.runtime.sendMessage({action: 'backendPrepared'}, callback); chrome.runtime.sendMessage({action: 'backendPrepared'}, callback);
if (this._badgePrepareDelayTimer !== null) {
clearTimeout(this._badgePrepareDelayTimer);
this._badgePrepareDelayTimer = null;
}
this._isPrepared = true; this._isPrepared = true;
this._updateBadge(); this._updateBadge();
} }
@ -878,9 +888,11 @@ class Backend {
let status = null; let status = null;
if (!this._isPrepared) { if (!this._isPrepared) {
text = '...'; if (this._badgePrepareDelayTimer === null) {
color = '#f0ad4e'; text = '...';
status = 'Loading'; color = '#f0ad4e';
status = 'Loading';
}
} else if (!this._anyOptionsMatches((options) => options.general.enable)) { } else if (!this._anyOptionsMatches((options) => options.general.enable)) {
text = 'off'; text = 'off';
color = '#555555'; color = '#555555';