Fix pool icon loop and config panel styling

website_example/js/common.js

@@ -60,35 +60,7 @@ const lucideIconMap = {
     'fa-sign-out': 'log-out'
 };
 
-function createLucideSvg(iconName, classes, sourceNode) {
-    if (!window.lucide || !window.lucide.icons) return null;
-
-    const icon = window.lucide.icons[iconName];
-    if (!icon || typeof icon.toSvg !== 'function') return null;
-
-    const className = ['lucide', 'lucide-' + iconName]
-        .concat(classes || [])
-        .filter(Boolean)
-        .join(' ');
-
-    const wrapper = document.createElement('div');
-    wrapper.innerHTML = icon.toSvg({
-        'stroke-width': 1.9,
-        class: className
-    });
-
-    const svg = wrapper.firstElementChild;
-    if (!svg) return null;
-
-    if (sourceNode && sourceNode.attributes) {
-        Array.from(sourceNode.attributes).forEach(function(attr) {
-            if (attr.name === 'class' || attr.name === 'data-lucide') return;
-            svg.setAttribute(attr.name, attr.value);
-        });
-    }
-
-    return svg;
-}
+let lucideRenderingActive = false;
 
 function renderLucideIcons(root) {
     const scope = root || document;
@@ -114,19 +86,18 @@ function renderLucideIcons(root) {
         }
     });
 
-    const lucidePlaceholders = scope.querySelectorAll('[data-lucide]:not(svg)');
-    lucidePlaceholders.forEach(function(node) {
-        const iconName = node.getAttribute('data-lucide');
-        if (!iconName) return;
-
-        const classes = Array.from(node.classList).filter(function(cls) {
-            return cls !== 'fa' && cls.indexOf('fa-') !== 0;
-        });
-
-        const svg = createLucideSvg(iconName, classes, node);
-        if (!svg) return;
-        node.replaceWith(svg);
-    });
+    if (window.lucide && typeof window.lucide.createIcons === 'function') {
+        lucideRenderingActive = true;
+        try {
+            window.lucide.createIcons({
+                icons: window.lucide.icons,
+                attrs: { 'stroke-width': 1.9 },
+                nameAttr: 'data-lucide'
+            });
+        } finally {
+            lucideRenderingActive = false;
+        }
+    }
 }
 
 function toggleSingleTabNav(selector) {
@@ -137,11 +108,13 @@ function toggleSingleTabNav(selector) {
 
 let lucideRenderScheduled = false;
 function scheduleLucideRender() {
-    if (lucideRenderScheduled) return;
+    if (lucideRenderScheduled || lucideRenderingActive) return;
     lucideRenderScheduled = true;
     requestAnimationFrame(function() {
         lucideRenderScheduled = false;
-        renderLucideIcons(document.body);
+        if (!lucideRenderingActive) {
+            renderLucideIcons(document.body);
+        }
     });
 }
 
@@ -149,8 +122,14 @@ $(function() {
     const pageRoot = document.getElementById('page');
     if (!pageRoot || typeof MutationObserver === 'undefined') return;
 
-    const observer = new MutationObserver(function() {
-        scheduleLucideRender();
+    const observer = new MutationObserver(function(mutations) {
+        if (lucideRenderingActive) return;
+        const hasChildChanges = mutations.some(function(mutation) {
+            return mutation.type === 'childList' && (mutation.addedNodes.length || mutation.removedNodes.length);
+        });
+        if (hasChildChanges) {
+            scheduleLucideRender();
+        }
     });
 
     observer.observe(pageRoot, {