From 9f4d99c8db99303f36d20070382ff50222b6a27c Mon Sep 17 00:00:00 2001 From: schlagmichdoch Date: Wed, 7 Aug 2024 15:26:49 +0200 Subject: [PATCH] Prevent edited displayname from flickering on page load by changing loading order --- public/scripts/ui-main.js | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/public/scripts/ui-main.js b/public/scripts/ui-main.js index ee2c081..a163edf 100644 --- a/public/scripts/ui-main.js +++ b/public/scripts/ui-main.js @@ -206,10 +206,6 @@ class FooterUI { Events.on('display-name', e => this._onDisplayName(e.detail.displayName)); Events.on('self-display-name-changed', e => this._insertDisplayName(e.detail)); - - // Load saved display name on page load - Events.on('ws-connected', _ => this._loadSavedDisplayName()); - Events.on('evaluate-footer-badges', _ => this._evaluateFooterBadges()); } @@ -234,17 +230,20 @@ class FooterUI { } async _loadSavedDisplayName() { - const displayName = await this._getSavedDisplayName() + const displayNameSaved = await this._getSavedDisplayName() - if (!displayName) return; + if (!displayNameSaved) return; - console.log("Retrieved edited display name:", displayName) - Events.fire('self-display-name-changed', displayName); + console.log("Retrieved edited display name:", displayNameSaved) + Events.fire('self-display-name-changed', displayNameSaved); } - _onDisplayName(displayName){ - // set display name - this.$displayName.setAttribute('placeholder', displayName); + async _onDisplayName(displayNameServer){ + // load saved displayname first to prevent flickering + await this._loadSavedDisplayName(); + + // set original display name as placeholder + this.$displayName.setAttribute('placeholder', displayNameServer); }