From b03e99faa26ca863f6d01db4ca139b38277be4b7 Mon Sep 17 00:00:00 2001
From: SethBurkart123 <seth.burkart@hills.adventist.edu.au>
Date: Fri, 15 Aug 2025 11:04:31 +1000
Subject: [PATCH] perf: only load svelte app on click

---
 .../utils/Adders/AddExtensionSettings.ts      | 25 +++++++++++++------
 src/seqta/utils/setupSettingsButton.ts        |  6 +++++
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/seqta/utils/Adders/AddExtensionSettings.ts b/src/seqta/utils/Adders/AddExtensionSettings.ts
index 6ce7c4df..eada6b39 100644
--- a/src/seqta/utils/Adders/AddExtensionSettings.ts
+++ b/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);
+  }
+}
diff --git a/src/seqta/utils/setupSettingsButton.ts b/src/seqta/utils/setupSettingsButton.ts
index ecf340aa..07f06317 100644
--- a/src/seqta/utils/setupSettingsButton.ts
+++ b/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) => {