improve text replacement logic

Author: nini22P

app/[locale]/components/AprilFools/AprilFools.tsx

@@ -3,6 +3,15 @@
 import { useEffect } from 'react'
 import { usePathname } from 'next/navigation'
 
+function replaceInNode(root: Node) {
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT)
+  let node: Node | null
+  while ((node = walker.nextNode())) {
+    if (node.textContent?.includes('WebGAL'))
+      node.textContent = node.textContent.replace(/WebGAL/g, 'WebG@L')
+  }
+}
+
 const AprilFools = () => {
   const pathname = usePathname()
 
@@ -13,14 +22,16 @@ const AprilFools = () => {
     if (document.title.includes('WebGAL'))
       document.title = document.title.replace(/WebGAL/g, 'WebG@L')
 
-    const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT)
-    const textNodes: Text[] = []
-    let node: Node | null
-    while ((node = walker.nextNode())) textNodes.push(node as Text)
-    textNodes.forEach(node => {
-      if (node.textContent?.includes('WebGAL'))
-        node.textContent = node.textContent.replace(/WebGAL/g, 'WebG@L')
+    replaceInNode(document.body)
+
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach(({ addedNodes }) =>
+        addedNodes.forEach(node => replaceInNode(node))
+      )
     })
+    observer.observe(document.body, { childList: true, subtree: true })
+
+    return () => observer.disconnect()
   }, [pathname])
 
   return null