Refactor startObserveDom function to use a while loop instead of MutationObserver for better performance

src/ts/observer.ts

@@ -2,6 +2,7 @@ import { get } from "svelte/store";
 import { runTrigger } from "./process/triggers";
 import { CurrentCharacter, CurrentChat } from "./stores";
 import { runCharacterJS } from "./plugins/embedscript";
+import { sleep } from "./util";
 
 
 function nodeObserve(node:HTMLElement){
@@ -47,23 +48,11 @@ function nodeObserve(node:HTMLElement){
     }
 }
 
-export function startObserveDom(){
+export async function startObserveDom(){
-    const observer = new MutationObserver((mutations) => {
+    //We are using a while loop intead of MutationObserver because MutationObserver is expensive for just a few elements
-        mutations.forEach((mutation) => {
+    while(true){
-            const node = mutation.target as HTMLElement;
+        document.querySelectorAll('[risu-trigger]').forEach(nodeObserve);
-            if(node.nodeType !== 1){
+        document.querySelectorAll('[risu-btn]').forEach(nodeObserve);
-                return;
+        await sleep(100);
-            }
+    }
-            node.querySelectorAll('[risu-trigger]').forEach(nodeObserve);
-            node.querySelectorAll('[risu-btn]').forEach(nodeObserve);
-            nodeObserve(node)
-        });
-    });
-
-    observer.observe(document.body, {
-        childList: true,
-        subtree: true,
-        attributeFilter: ['risu-trigger', 'risu-btn'],
-        attributes: true,
-    });
 }