impr: make leaderboard requests in parallel

Author: Miodec

frontend/src/ts/pages/leaderboards.ts

@@ -203,14 +203,26 @@ async function requestData(update = false): Promise<void> {
       mode2: state.mode2,
     };
 
-    let response;
+    const requests: {
+      data:
+        | ReturnType<typeof Ape.leaderboards.get>
+        | ReturnType<typeof Ape.leaderboards.getDaily>
+        | undefined;
+      rank:
+        | ReturnType<typeof Ape.leaderboards.getRank>
+        | ReturnType<typeof Ape.leaderboards.getDailyRank>
+        | undefined;
+    } = {
+      data: undefined,
+      rank: undefined,
+    };
 
     if (state.type === "allTime") {
-      response = await Ape.leaderboards.get({
+      requests.data = Ape.leaderboards.get({
         query: { ...baseQuery, page: state.page },
       });
     } else {
-      response = await Ape.leaderboards.getDaily({
+      requests.data = Ape.leaderboards.getDaily({
         query: {
           ...baseQuery,
           page: state.page,
@@ -219,40 +231,45 @@ async function requestData(update = false): Promise<void> {
       });
     }
 
-    if (response.status === 200) {
-      state.data = response.body.data.entries;
-      state.count = response.body.data.count;
-      state.pageSize = response.body.data.pageSize;
+    if (isAuthenticated() && state.userData === null) {
+      if (state.type === "allTime") {
+        requests.rank = Ape.leaderboards.getRank({
+          query: { ...baseQuery },
+        });
+      } else {
+        requests.rank = Ape.leaderboards.getDailyRank({
+          query: {
+            ...baseQuery,
+          },
+        });
+      }
+    }
+
+    const [dataResponse, rankResponse] = await Promise.all([
+      requests.data,
+      requests.rank,
+    ]);
+
+    if (dataResponse.status === 200) {
+      state.data = dataResponse.body.data.entries;
+      state.count = dataResponse.body.data.count;
+      state.pageSize = dataResponse.body.data.pageSize;
 
       if (state.type === "daily") {
         //@ts-ignore not sure why this is causing errors when it's clearly defined in the schema
         // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        state.minWpm = response.body.data.minWpm;
+        state.minWpm = dataResponse.body.data.minWpm;
       }
     } else {
       state.data = null;
       state.error = "Something went wrong";
       Notifications.add(
-        "Failed to get leaderboard: " + response.body.message,
+        "Failed to get leaderboard: " + dataResponse.body.message,
         -1
       );
     }
 
-    if (isAuthenticated() && state.userData === null) {
-      let rankResponse;
-
-      if (state.type === "allTime") {
-        rankResponse = await Ape.leaderboards.getRank({
-          query: { ...baseQuery },
-        });
-      } else {
-        rankResponse = await Ape.leaderboards.getDailyRank({
-          query: {
-            ...baseQuery,
-          },
-        });
-      }
-
+    if (state.userData === null && rankResponse !== undefined) {
       if (rankResponse.status === 200) {
         if (rankResponse.body.data !== null) {
           state.userData = rankResponse.body.data;
@@ -288,31 +305,52 @@ async function requestData(update = false): Promise<void> {
     }
     return;
   } else if (state.type === "weekly") {
-    const data = await Ape.leaderboards.getWeeklyXp({
+    const requests: {
+      data: ReturnType<typeof Ape.leaderboards.getWeeklyXp> | undefined;
+      rank: ReturnType<typeof Ape.leaderboards.getWeeklyXpRank> | undefined;
+    } = {
+      data: undefined,
+      rank: undefined,
+    };
+
+    requests.data = Ape.leaderboards.getWeeklyXp({
       query: { page: state.page, weeksBefore: state.lastWeek ? 1 : undefined },
     });
 
-    if (data.status === 200) {
-      state.data = data.body.data.entries;
-      state.count = data.body.data.count;
-      state.pageSize = data.body.data.pageSize;
+    if (isAuthenticated() && state.userData === null) {
+      requests.rank = Ape.leaderboards.getWeeklyXpRank();
+    }
+
+    const [dataResponse, rankResponse] = await Promise.all([
+      requests.data,
+      requests.rank,
+    ]);
+
+    if (dataResponse.status === 200) {
+      state.data = dataResponse.body.data.entries;
+      state.count = dataResponse.body.data.count;
+      state.pageSize = dataResponse.body.data.pageSize;
     } else {
       state.data = null;
       state.error = "Something went wrong";
-      Notifications.add("Failed to get leaderboard: " + data.body.message, -1);
+      Notifications.add(
+        "Failed to get leaderboard: " + dataResponse.body.message,
+        -1
+      );
     }
 
-    if (isAuthenticated() && state.userData === null) {
-      const userData = await Ape.leaderboards.getWeeklyXpRank();
-
-      if (userData.status === 200) {
-        if (userData.body.data !== null) {
-          state.userData = userData.body.data;
+    if (state.userData === null && rankResponse !== undefined) {
+      if (rankResponse.status === 200) {
+        if (rankResponse.body.data !== null) {
+          state.userData = rankResponse.body.data;
         }
       } else {
         state.userData = null;
         state.error = "Something went wrong";
-        Notifications.add("Failed to get rank: " + userData.body.message, -1);
+        Notifications.add(
+          "Failed to get rank: " + rankResponse.body.message,
+          -1
+        );
       }
     }