monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-11-09 13:44:29 +08:00
Code Issues Projects Releases Packages Wiki Activity

fix: avatars blocking UI rendering and causing freezes

Browse source 
Avatar fetch was being awaited.
This means that if the request to discord takes a long time,
the UI would be frozen.

Closes #4599
This commit is contained in:
Miodec 2023-09-01 19:28:48 +02:00
parent b9351c6d9d
commit ec9430a84a
3 changed files with 41 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
frontend/src/ts/elements/account-button.ts
View file

@ -108,20 +108,20 @@ export async function update(
});
}
if (discordAvatar && discordId) {
const discordAvatarUrl = await Misc.getDiscordAvatarUrl(
discordId,
discordAvatar
);
if (discordAvatarUrl) {
$("#top #menu .account .avatar").css(
"background-image",
`url(${discordAvatarUrl})`
);
usingAvatar = true;
Misc.getDiscordAvatarUrl(discordId, discordAvatar).then(
(discordAvatarUrl) => {
if (discordAvatarUrl) {
$("#top #menu .account .avatar").css(
"background-image",
`url(${discordAvatarUrl})`
);
usingAvatar = true;
$("#top #menu .account .user").addClass("hidden");
$("#top #menu .account .avatar").removeClass("hidden");
}
$("#top #menu .account .user").addClass("hidden");
$("#top #menu .account .avatar").removeClass("hidden");
}
}
);
} else {
$("#top #menu .account .avatar").addClass("hidden");
$("#top #menu .account .user").removeClass("hidden");

38
frontend/src/ts/elements/leaderboards.ts
View file

@ -279,7 +279,7 @@ async function fillTable(lb: LbKey, prepend?: number): Promise<void> {
return;
}
let side;
let side: string;
if (lb === "15") {
side = "left";
} else {
@ -317,16 +317,6 @@ async function fillTable(lb: LbKey, prepend?: number): Promise<void> {
);
});
const avatarUrls = (await Promise.allSettled(avatarUrlPromises)).map(
(promise) => {
if (promise.status === "fulfilled") {
return promise.value;
}
return null;
}
);
let a = currentData[lb].length - leaderboardSingleLimit;
let b = currentData[lb].length;
if (a < 0) a = 0;
@ -351,12 +341,7 @@ async function fillTable(lb: LbKey, prepend?: number): Promise<void> {
entry.rank = i + 1;
}
let avatar = `<div class="avatarPlaceholder"><i class="fas fa-user-circle"></i></div>`;
const currentEntryAvatarUrl = avatarUrls[i];
if (currentEntryAvatarUrl !== null) {
avatar = `<div class="avatar" style="background-image:url(${currentEntryAvatarUrl})"></div>`;
}
const avatar = `<div class="avatarPlaceholder"><i class="fas fa-user-circle"></i></div>`;
html += `
<tr ${meClassString}>
@ -390,6 +375,25 @@ async function fillTable(lb: LbKey, prepend?: number): Promise<void> {
} else {
$(`#leaderboardsWrapper table.${side} tbody`).prepend(html);
}
const elements = $(
`#leaderboardsWrapper table.${side} tbody .avatarPlaceholder`
);
Promise.allSettled(avatarUrlPromises).then((promises) => {
const urls = promises.map((promise) => {
if (promise.status === "fulfilled") {
return promise.value;
}
return null;
});
urls.forEach((url, index) => {
if (url !== null) {
$(elements[index + a]).replaceWith(
`<div class="avatar" style="background-image:url(${url})"></div>`
);
}
});
});
}
const showYesterdayButton = $("#leaderboardsWrapper .showYesterdayButton");

14
frontend/src/ts/elements/profile.ts
View file

@ -38,16 +38,16 @@ export async function update(
details.find(".placeholderAvatar").removeClass("hidden");
if (profile.discordAvatar && profile.discordId && !banned) {
const avatarUrl = await Misc.getDiscordAvatarUrl(
Misc.getDiscordAvatarUrl(
profile.discordId,
profile.discordAvatar,
256
);
if (avatarUrl) {
details.find(".placeholderAvatar").addClass("hidden");
details.find(".avatar").css("background-image", `url(${avatarUrl})`);
}
).then((avatarUrl) => {
if (avatarUrl) {
details.find(".placeholderAvatar").addClass("hidden");
details.find(".avatar").css("background-image", `url(${avatarUrl})`);
}
});
} else {
details.find(".avatar").removeAttr("style");
}