perf: only load svelte app on click

src/seqta/utils/Adders/AddExtensionSettings.ts

@@ -7,6 +7,8 @@ import renderSvelte from "@/interface/main";
 import { SettingsResizer } from "@/seqta/ui/SettingsResizer";
 import Settings from "@/interface/pages/settings.svelte";
 
+let isSettingsRendered = false;
+
 export function addExtensionSettings() {
   const extensionPopup = document.createElement("div");
   extensionPopup.classList.add("outside-container", "hide");
@@ -17,14 +19,6 @@ export function addExtensionSettings() {
   ) as HTMLDivElement;
   if (extensionContainer) extensionContainer.appendChild(extensionPopup);
 
-  // create shadow dom and render svelte app
-  try {
-    const shadow = extensionPopup.attachShadow({ mode: "open" });
-    requestIdleCallback(() => renderSvelte(Settings, shadow));
-  } catch (err) {
-    console.error(err);
-  }
-
   const container = document.getElementById("container");
 
   new SettingsResizer();
@@ -38,3 +32,18 @@ export function addExtensionSettings() {
     }
   };
 }
+
+export function renderSettingsIfNeeded() {
+  if (isSettingsRendered) return;
+  
+  const extensionPopup = document.getElementById("ExtensionPopup");
+  if (!extensionPopup) return;
+
+  try {
+    const shadow = extensionPopup.attachShadow({ mode: "open" });
+    requestIdleCallback(() => renderSvelte(Settings, shadow));
+    isSettingsRendered = true;
+  } catch (err) {
+    console.error(err);
+  }
+}

src/seqta/utils/setupSettingsButton.ts

@@ -5,6 +5,8 @@ import {
 } from "./Closers/closeExtensionPopup";
 import { animate } from "motion";
 import { settingsState } from "./listeners/SettingsState";
+import { renderSettingsIfNeeded } from "./Adders/AddExtensionSettings";
+import { delay } from "./delay";
 
 export function setupSettingsButton() {
   var AddedSettings = document.getElementById("AddedSettings");
@@ -14,6 +16,10 @@ export function setupSettingsButton() {
     if (SettingsClicked) {
       closeExtensionPopup(extensionPopup as HTMLElement);
     } else {
+      renderSettingsIfNeeded();
+
+      await delay(30);
+      
       if (settingsState.animations) {
         animate(0, 1, {
           onUpdate: (progress) => {