This already looks a number times better

src/components/settings/Loader.astro

@@ -1,5 +1,5 @@
 <script>
-    import { settings, Settings } from "@utils/settings/index";
+    /* import { settings, Settings } from "@utils/settings/index";
     import { loadProxyScripts, setTransport, initSw, setSWStuff } from "@utils/registerSW";
     // This loads the settings in a nice way
     settings.tabSettings.cloakTab(localStorage.getItem(Settings.TabSettings.tabCloak) as string || "default");
@@ -22,4 +22,28 @@
         const sw = await initSw();
         await setSWStuff({sw: sw.sw, conn, sj: sw.sj });
     });
+    */
+    import { EventHandler } from "@utils/events";
+    import { SW, createProxyScripts, checkProxyScripts, createBareMuxConn, setTransport } from "@utils/serviceWorker";
+    
+    const init = async () => {
+        for (const script of createProxyScripts()) {
+            document.body.appendChild(script);
+        }
+        await checkProxyScripts();
+        const conn = await createBareMuxConn("/baremux/worker.js");
+        await setTransport(conn, "libcurl");
+        window.sw = new SW(conn);
+    }
+
+    const eventHandler = new EventHandler({
+        events: {
+            "DOMContentLoaded": (async () => {
+                await init();
+            })
+        },
+        logging: true 
+    });
+    //bind the events
+    eventHandler.bind();
 </script>

src/global.d.ts

@@ -0,0 +1,11 @@
+// LEGIT here for ONE global.
+
+import type { SW } from "@utils/serviceWorker";
+
+declare global {
+    interface Window {
+        sw: SW;
+    }
+};
+
+export {};

src/pages/index.astro

@@ -47,7 +47,8 @@ import Layout from "@layouts/Layout.astro";
         },
         logging: false
     });
-    eHandler.handleEvents();
+    //Bind the events.
+    eHandler.bind();
 </script>
 <noscript>
     JavaScript is required to run this app.

src/pages/loading.astro

@@ -3,12 +3,11 @@ import LoadingComponent from "@components/Loading.astro";
 import Layout from "@layouts/Layout.astro";
 ---
 
-<!-- Layout title="Loading page..." noHeader="true">
+<Layout title="Loading page..." noHeader="true">
     <LoadingComponent />
-</Layout-->
+</Layout>
 <script>
     import { EventHandler } from "@utils/events";
-    import { checkProxyScripts, createBareMuxConn, createProxyScripts, SW } from "@utils/serviceWorker";
     import { navigate } from "astro:transitions/client";
     function isComingFromIframe() {
         try {
@@ -25,7 +24,7 @@ import Layout from "@layouts/Layout.astro";
                 const isIframe = isComingFromIframe();
                 if (!isIframe) {
                     console.log("Assuming request isn't coming from iframe. Redirecting...");
-                    navigate("/");
+                    //navigate("/");
                 }
             }),
         },

src/utils/serviceWorker.ts

@@ -78,7 +78,7 @@ const setTransport = (conn: BareMuxConnection,  transport?: "libcurl" | "epoxy")
     return new Promise((resolve) => {
         console.log(`Set wisp server at: ${server ? WispServers[server]: WispServers.default }`);
         if (transport === "epoxy") return resolve(conn.setTransport("/epoxy/index.mjs", [ { wisp: server ? WispServers[server] : WispServers.default }]));
-        if (transport === "libcurl") return resolve(conn.setTransport("/libcurl/index.msj", [ { wisp: server ? WispServers[server] : WispServers.default }]));
+        if (transport === "libcurl") return resolve(conn.setTransport("/libcurl/index.mjs", [ { wisp: server ? WispServers[server] : WispServers.default }]));
     });
 };