fix: avatars blocking UI rendering and causing freezes

Avatar fetch was being awaited. This means that if the request to discord takes a long time, the UI would be frozen. Closes #4599
monkeytypegame · Sep 1, 2023 · ec9430a · ec9430a
1 parent b9351c6
commit ec9430a
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 37 deletions.
diff --git a/frontend/src/ts/elements/account-button.ts b/frontend/src/ts/elements/account-button.ts
@@ -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");

diff --git a/frontend/src/ts/elements/leaderboards.ts b/frontend/src/ts/elements/leaderboards.ts
@@ -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");

diff --git a/frontend/src/ts/elements/profile.ts b/frontend/src/ts/elements/profile.ts
@@ -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");
   }