perf: fix account page getting slower with every load (@Miodec) (monkeytypegame#6606)

Stacking event listeners go brrrrrrr

Author: Miodec

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">

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();
-
-  if (snapshot !== undefined && (snapshot.tags?.length ?? 0) > 0) {
-    $(".pageAccount .content .filterButtons .buttonsAndTitle.tags").removeClass(
-      "hidden"
-    );
-
-    let html = "";
-
-    html +=
-      "<select class='tagsSelect' group='tags' placeholder='select a tag' multiple>";
+  //snapshot at this point is guaranteed to exist
+  const snapshot = DB.getSnapshot() as Snapshot;
 
-    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 tagsSection = $(
+    ".pageAccount .content .filterButtons .buttonsAndTitle.tags"
+  );
 
-    const el = document.querySelector(
-      ".pageAccount .content .filterButtons .buttonsAndTitle.tags .select"
+  if (snapshot.tags.length === 0) {
+    tagsSection.addClass("hidden");
+  } else {
+    tagsSection.removeClass("hidden");
+    updateTagsDropdownOptions();
+    const selectEl = document.querySelector(
+      ".pageAccount .content .filterButtons .buttonsAndTitle.tags .select .tagsSelect"
     );
-    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 {

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);