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