From 4bb431b98a3402b0b64d5ab06a4f1ca3701e51a5 Mon Sep 17 00:00:00 2001
From: Jack <jack@monkeytype.com>
Date: Thu, 29 May 2025 17:00:56 +0200
Subject: [PATCH] perf: fix account page getting slower with every load
 (@miodec) (#6606)

Stacking event listeners go brrrrrrr
---
 frontend/src/html/pages/account.html          |  9 ++-
 .../src/ts/elements/account/result-filters.ts | 76 +++++++++++--------
 frontend/src/ts/pages/account.ts              |  1 +
 3 files changed, 55 insertions(+), 31 deletions(-)

diff --git a/frontend/src/html/pages/account.html b/frontend/src/html/pages/account.html
index 365e2d549..07ef6c244 100644
--- a/frontend/src/html/pages/account.html
+++ b/frontend/src/html/pages/account.html
@@ -497,7 +497,14 @@
             <i class="fas fa-tag"></i>
             tags
           </div>
-          <div class="select filterGroup" group="tags"></div>
+          <div class="select filterGroup" group="tags">
+            <select
+              class="tagsSelect"
+              group="tags"
+              placeholder="select a tag"
+              multiple
+            ></select>
+          </div>
         </div>
         <div class="buttonsAndTitle funbox">
           <div class="title">
diff --git a/frontend/src/ts/elements/account/result-filters.ts b/frontend/src/ts/elements/account/result-filters.ts
index a61f12d1b..0372bfd76 100644
--- a/frontend/src/ts/elements/account/result-filters.ts
+++ b/frontend/src/ts/elements/account/result-filters.ts
@@ -16,7 +16,7 @@ import {
 import { LocalStorageWithSchema } from "../../utils/local-storage-with-schema";
 import defaultResultFilters from "../../constants/default-result-filters";
 import { getAllFunboxes } from "@monkeytype/funbox";
-import { SnapshotUserTag } from "../../constants/default-snapshot";
+import { Snapshot, SnapshotUserTag } from "../../constants/default-snapshot";
 import { LanguageList } from "../../constants/languages";
 
 export function mergeWithDefaultFilters(
@@ -742,9 +742,38 @@ let selectChangeCallbackFn: () => void = () => {
   //
 };
 
+export function updateTagsDropdownOptions(): void {
+  const el = document.querySelector<HTMLElement>(
+    ".pageAccount .content .filterButtons .buttonsAndTitle.tags .select select"
+  );
+
+  if (!(el instanceof HTMLElement)) return;
+
+  const snapshot = DB.getSnapshot();
+
+  if (snapshot === undefined) {
+    return;
+  }
+
+  let html = "";
+
+  html += "<option value='all'>all</option>";
+  html += "<option value='none'>no tag</option>";
+
+  for (const tag of snapshot.tags) {
+    html += `<option value="${tag._id}" filter="${tag.name}">${tag.display}</option>`;
+  }
+
+  el.innerHTML = html;
+}
+
+let buttonsAppended = false;
+
 export async function appendButtons(
   selectChangeCallback: () => void
 ): Promise<void> {
+  if (buttonsAppended) return;
+
   selectChangeCallbackFn = selectChangeCallback;
 
   groupSelects["language"] = new SlimSelect({
@@ -810,34 +839,24 @@ export async function appendButtons(
     },
   });
 
-  const snapshot = DB.getSnapshot();
+  //snapshot at this point is guaranteed to exist
+  const snapshot = DB.getSnapshot() as Snapshot;
 
-  if (snapshot !== undefined && (snapshot.tags?.length ?? 0) > 0) {
-    $(".pageAccount .content .filterButtons .buttonsAndTitle.tags").removeClass(
-      "hidden"
+  const tagsSection = $(
+    ".pageAccount .content .filterButtons .buttonsAndTitle.tags"
+  );
+
+  if (snapshot.tags.length === 0) {
+    tagsSection.addClass("hidden");
+  } else {
+    tagsSection.removeClass("hidden");
+    updateTagsDropdownOptions();
+    const selectEl = document.querySelector(
+      ".pageAccount .content .filterButtons .buttonsAndTitle.tags .select .tagsSelect"
     );
-
-    let html = "";
-
-    html +=
-      "<select class='tagsSelect' group='tags' placeholder='select a tag' multiple>";
-
-    html += "<option value='all'>all</option>";
-    html += "<option value='none'>no tag</option>";
-
-    for (const tag of snapshot.tags) {
-      html += `<option value="${tag._id}" filter="${tag.name}">${tag.display}</option>`;
-    }
-
-    html += "</select>";
-
-    const el = document.querySelector(
-      ".pageAccount .content .filterButtons .buttonsAndTitle.tags .select"
-    );
-    if (el) {
-      el.innerHTML = html;
+    if (selectEl) {
       groupSelects["tags"] = new SlimSelect({
-        select: el.querySelector(".tagsSelect") as HTMLSelectElement,
+        select: selectEl,
         settings: {
           showSearch: true,
           placeholderText: "select a tag",
@@ -861,13 +880,10 @@ export async function appendButtons(
         },
       });
     }
-  } else {
-    $(".pageAccount .content .filterButtons .buttonsAndTitle.tags").addClass(
-      "hidden"
-    );
   }
 
   void updateFilterPresets();
+  buttonsAppended = true;
 }
 
 export function removeButtons(): void {
diff --git a/frontend/src/ts/pages/account.ts b/frontend/src/ts/pages/account.ts
index 3e13cca35..7e196004f 100644
--- a/frontend/src/ts/pages/account.ts
+++ b/frontend/src/ts/pages/account.ts
@@ -1341,6 +1341,7 @@ export const page = new Page({
       $(".pageAccount .preloader").removeClass("hidden");
       await LoadingPage.showBar();
     }
+    ResultFilters.updateTagsDropdownOptions();
     await ResultFilters.appendButtons(update);
     ResultFilters.updateActive();
     await Misc.sleep(0);