Improve loader smoothness

src/components/loader.svelte

@@ -6,13 +6,10 @@
     let isVisible = true;
 
     function showLoader() {
-        document.querySelectorAll("dialog").forEach((el) => el.remove());
-        console.log("showLoader", isVisible);
         isVisible = true;
     }
 
     function hideLoader() {
-        console.log("hideLoader", isVisible);
         isVisible = false;
     }
 

src/content/end.ts

@@ -101,6 +101,8 @@ const main = async (settings: ExtensionSettings) => {
 };
 
 const replaceStyles = (theme: string) => {
+    if (theme === "orig") return Promise.resolve();
+
     document.head.querySelectorAll('link[href$="/css.css"]').forEach((e) => {
         e.remove();
     });
@@ -114,20 +116,22 @@ const replaceStyles = (theme: string) => {
         chrome.runtime.getURL("themes/" + theme + ".css"),
     );
     document.getElementsByTagName("head")[0].appendChild(link);
+    return new Promise((resolve) => {
+        link.onload = resolve;
+    });
 };
 
 chrome.runtime.sendMessage(
     { type: MessageType.GET_SETTINGS },
     async (settings: ExtensionSettings) => {
         console.log("PTT end with settings:", settings);
-        if (settings.theme === "orig") {
-            return;
-        }
-        replaceStyles(settings.theme);
-        if (settings.theme === "orig-dark") {
-            setTimeout(() => document.dispatchEvent(pttLoadedEvent), 0);
-            return;
-        }
-        await main(settings).then(() => document.dispatchEvent(pttLoadedEvent));
+        await Promise.all([
+            replaceStyles(settings.theme).then(() => {
+                console.log("PTT styles loaded");
+            }),
+            !["orig", "orig-dark"].includes(settings.theme) && main(settings),
+        ]);
+        console.log("PTT loaded");
+        document.dispatchEvent(pttLoadedEvent);
     },
 );

src/content/loader.ts

@@ -1,8 +1,7 @@
 import Loader from "../components/loader.svelte";
 
-const loaderElement = document.getElementById("ptt-loader");
-if (loaderElement) {
-    new Loader({
-        target: loaderElement,
-    });
-}
+const loaderElement = document.createElement("pttloader");
+document.documentElement.appendChild(loaderElement);
+new Loader({
+    target: loaderElement,
+});

src/content/start.ts

@@ -1,4 +1,3 @@
-import { pttLoadedEvent } from "../events";
 import { MessageType } from "../messages";
 import { ExtensionSettings } from "../settings";
 
@@ -19,12 +18,7 @@ const setFavicon = () => {
 };
 
 const addLoader = () => {
-    const div = document.createElement("pttloader");
-    div.id = "ptt-loader";
-    document.documentElement.appendChild(div);
-
     const script = document.createElement("script");
-    script.id = "ptt-loader-script";
     script.setAttribute("type", "text/javascript");
     script.setAttribute("src", chrome.runtime.getURL("content/loader.js"));
     document.documentElement.appendChild(script);
@@ -39,7 +33,6 @@ chrome.runtime.sendMessage(
         }
         console.log("PTT start with settings:", settings);
         if (settings.theme == "orig" || settings.theme == "orig-dark") {
-            setTimeout(() => document.dispatchEvent(pttLoadedEvent), 0);
             return;
         }