From 4d5085d351b6eb8fdb566fab6d6ba211724da2c3 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Mon, 19 Feb 2024 14:22:49 +0100
Subject: [PATCH] perf: speed up settings page loading

---
 frontend/src/ts/pages/settings.ts | 122 ++++++++++++++----------------
 1 file changed, 57 insertions(+), 65 deletions(-)

diff --git a/frontend/src/ts/pages/settings.ts b/frontend/src/ts/pages/settings.ts
index 535b21729..724fc3f66 100644
--- a/frontend/src/ts/pages/settings.ts
+++ b/frontend/src/ts/pages/settings.ts
@@ -452,32 +452,30 @@ async function fillSettingsPage(): Promise<void> {
     );
   }
 
-  const languageSelectData = [];
+  const element = document.querySelector(
+    ".pageSettings .section[data-config-name='language'] select"
+  ) as Element;
+
+  let html = "";
   if (languageGroups) {
     for (const group of languageGroups) {
-      const groupData = {
-        label: group.name,
-        options: group.languages.map((language: string) => {
-          return {
-            value: language,
-            text: Misc.getLanguageDisplayString(language),
-            selected: language === Config.language,
-          };
-        }),
-      };
-      languageSelectData.push(groupData);
+      html += `<optgroup label="${group.name}">`;
+      for (const language of group.languages) {
+        const selected = language === Config.language ? "selected" : "";
+        const text = Misc.getLanguageDisplayString(language);
+        html += `<option value="${language}" ${selected}>${text}</option>`;
+      }
+      html += `</optgroup>`;
     }
   }
+  element.innerHTML = html;
   new SlimSelect({
-    select: ".pageSettings .section[data-config-name='language'] select",
-    data: languageSelectData,
+    select: element,
     settings: {
       searchPlaceholder: "search",
     },
   });
 
-  await Misc.sleep(0);
-
   let layoutsList;
   try {
     layoutsList = await Misc.getLayoutsList();
@@ -485,48 +483,42 @@ async function fillSettingsPage(): Promise<void> {
     console.error(Misc.createErrorMessage(e, "Failed to refresh keymap"));
   }
 
-  const layoutSelectData = [];
-  const keymapLayoutSelectData = [];
+  const layoutSelectElement = document.querySelector(
+    ".pageSettings .section[data-config-name='layout'] select"
+  ) as Element;
+  const keymapLayoutSelectElement = document.querySelector(
+    ".pageSettings .section[data-config-name='keymapLayout'] select"
+  ) as Element;
 
-  layoutSelectData.push({
-    value: "default",
-    text: "off",
-  });
-
-  keymapLayoutSelectData.push({
-    value: "overrideSync",
-    text: "emulator sync",
-  });
+  let layoutHtml = '<option value="default">off</option>';
+  let keymapLayoutHtml = '<option value="overrideSync">emulator sync</option>';
 
   if (layoutsList) {
     for (const layout of Object.keys(layoutsList)) {
+      const optionHtml = `<option value="${layout}">${layout.replace(
+        /_/g,
+        " "
+      )}</option>`;
       if (layout.toString() !== "korean") {
-        layoutSelectData.push({
-          value: layout,
-          text: layout.replace(/_/g, " "),
-        });
+        layoutHtml += optionHtml;
       }
       if (layout.toString() !== "default") {
-        keymapLayoutSelectData.push({
-          value: layout,
-          text: layout.replace(/_/g, " "),
-        });
+        keymapLayoutHtml += optionHtml;
       }
     }
   }
 
+  layoutSelectElement.innerHTML = layoutHtml;
+  keymapLayoutSelectElement.innerHTML = keymapLayoutHtml;
+
   new SlimSelect({
-    select: ".pageSettings .section[data-config-name='layout'] select",
-    data: layoutSelectData,
+    select: layoutSelectElement,
   });
 
   new SlimSelect({
-    select: ".pageSettings .section[data-config-name='keymapLayout'] select",
-    data: keymapLayoutSelectData,
+    select: keymapLayoutSelectElement,
   });
 
-  await Misc.sleep(0);
-
   let themes;
   try {
     themes = await Misc.getThemesList();
@@ -536,27 +528,35 @@ async function fillSettingsPage(): Promise<void> {
     );
   }
 
-  const themeSelectLightData = [];
-  const themeSelectDarkData = [];
+  const themeSelectLightElement = document.querySelector(
+    ".pageSettings .section[data-config-name='autoSwitchThemeInputs'] select.light"
+  ) as Element;
+  const themeSelectDarkElement = document.querySelector(
+    ".pageSettings .section[data-config-name='autoSwitchThemeInputs'] select.dark"
+  ) as Element;
+
+  let themeSelectLightHtml = "";
+  let themeSelectDarkHtml = "";
+
   if (themes) {
     for (const theme of themes) {
-      themeSelectLightData.push({
-        value: theme.name,
-        text: theme.name.replace(/_/g, " "),
-        selected: theme.name === Config.themeLight,
-      });
-      themeSelectDarkData.push({
-        value: theme.name,
-        text: theme.name.replace(/_/g, " "),
-        selected: theme.name === Config.themeDark,
-      });
+      const optionHtml = `<option value="${theme.name}" ${
+        theme.name === Config.themeLight ? "selected" : ""
+      }>${theme.name.replace(/_/g, " ")}</option>`;
+      themeSelectLightHtml += optionHtml;
+
+      const optionDarkHtml = `<option value="${theme.name}" ${
+        theme.name === Config.themeDark ? "selected" : ""
+      }>${theme.name.replace(/_/g, " ")}</option>`;
+      themeSelectDarkHtml += optionDarkHtml;
     }
   }
 
+  themeSelectLightElement.innerHTML = themeSelectLightHtml;
+  themeSelectDarkElement.innerHTML = themeSelectDarkHtml;
+
   new SlimSelect({
-    select:
-      ".pageSettings .section[data-config-name='autoSwitchThemeInputs'] select.light",
-    data: themeSelectLightData,
+    select: themeSelectLightElement,
     events: {
       afterChange: (newVal): void => {
         UpdateConfig.setThemeLight(newVal[0]?.value as string);
@@ -565,9 +565,7 @@ async function fillSettingsPage(): Promise<void> {
   });
 
   new SlimSelect({
-    select:
-      ".pageSettings .section[data-config-name='autoSwitchThemeInputs'] select.dark",
-    data: themeSelectDarkData,
+    select: themeSelectDarkElement,
     events: {
       afterChange: (newVal): void => {
         UpdateConfig.setThemeDark(newVal[0]?.value as string);
@@ -575,8 +573,6 @@ async function fillSettingsPage(): Promise<void> {
     },
   });
 
-  await Misc.sleep(0);
-
   const funboxEl = document.querySelector(
     ".pageSettings .section[data-config-name='funbox'] .buttons"
   ) as HTMLDivElement;
@@ -624,8 +620,6 @@ async function fillSettingsPage(): Promise<void> {
     funboxEl.innerHTML = funboxElHTML;
   }
 
-  await Misc.sleep(0);
-
   let isCustomFont = true;
   const fontsEl = document.querySelector(
     ".pageSettings .section[data-config-name='fontFamily'] .buttons"
@@ -677,7 +671,6 @@ async function fillSettingsPage(): Promise<void> {
     Config.customLayoutfluid.replace(/#/g, " ")
   );
 
-  await Misc.sleep(0);
   setEventDisabled(true);
   if (!groupsInitialized) {
     await initGroups();
@@ -688,7 +681,6 @@ async function fillSettingsPage(): Promise<void> {
     }
   }
   setEventDisabled(false);
-  await Misc.sleep(0);
   await ThemePicker.refreshButtons();
   await UpdateConfig.loadPromise;
 }