Prevent edited displayname from flickering on page load by changing loading order

This commit is contained in:
schlagmichdoch 2024-08-07 15:26:49 +02:00
parent 563c8dd8a8
commit 9f4d99c8db

View file

@ -206,10 +206,6 @@ class FooterUI {
Events.on('display-name', e => this._onDisplayName(e.detail.displayName)); Events.on('display-name', e => this._onDisplayName(e.detail.displayName));
Events.on('self-display-name-changed', e => this._insertDisplayName(e.detail)); 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()); Events.on('evaluate-footer-badges', _ => this._evaluateFooterBadges());
} }
@ -234,17 +230,20 @@ class FooterUI {
} }
async _loadSavedDisplayName() { 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) console.log("Retrieved edited display name:", displayNameSaved)
Events.fire('self-display-name-changed', displayName); Events.fire('self-display-name-changed', displayNameSaved);
} }
_onDisplayName(displayName){ async _onDisplayName(displayNameServer){
// set display name // load saved displayname first to prevent flickering
this.$displayName.setAttribute('placeholder', displayName); await this._loadSavedDisplayName();
// set original display name as placeholder
this.$displayName.setAttribute('placeholder', displayNameServer);
} }