potential fix for emojis sometimes not loading properly

public/s/js/comments.js

@@ -37,6 +37,9 @@ class CommentSystem {
                     this.customEmojis[e.name] = e.url;
                 });
                 console.log('Loaded Emojis:', this.customEmojis);
+
+                // Preload images to prevent NS Binding Aborted errors
+                this.preloadEmojiImages();
             } else {
                 this.customEmojis = {};
             }
@@ -46,6 +49,17 @@ class CommentSystem {
         }
     }
 
+    preloadEmojiImages() {
+        // Preload all emoji images into browser cache
+        if (!this.customEmojis) return;
+
+        Object.values(this.customEmojis).forEach(url => {
+            const img = new Image();
+            img.src = url;
+            // No need to append to DOM, just loading into cache
+        });
+    }
+
     // ...
 
     renderEmoji(match, name) {
@@ -645,13 +659,37 @@ class CommentSystem {
         if (actions) {
             actions.prepend(trigger);
 
+            // Create picker once and cache it
+            let picker = null;
+            let closeHandler = null;
+
             trigger.addEventListener('click', (e) => {
                 e.preventDefault();
-                let picker = container.querySelector('.emoji-picker');
+
+                // If picker already exists, toggle visibility
                 if (picker) {
-                    picker.remove();
+                    const isVisible = picker.style.display !== 'none';
+                    if (isVisible) {
+                        picker.style.display = 'none';
+                        if (closeHandler) {
+                            document.removeEventListener('click', closeHandler);
+                            closeHandler = null;
+                        }
+                    } else {
+                        picker.style.display = 'block';
+                        closeHandler = (ev) => {
+                            if (!picker.contains(ev.target) && ev.target !== trigger) {
+                                picker.style.display = 'none';
+                                document.removeEventListener('click', closeHandler);
+                                closeHandler = null;
+                            }
+                        };
+                        setTimeout(() => document.addEventListener('click', closeHandler), 0);
+                    }
                     return;
                 }
+
+                // Create picker only once
                 picker = document.createElement('div');
                 picker.className = 'emoji-picker';
 
@@ -661,6 +699,14 @@ class CommentSystem {
                         const img = document.createElement('img');
                         img.src = url;
                         img.title = `:${name}:`;
+                        img.loading = 'lazy'; // Use native lazy loading
+
+                        // Add error handling for failed loads
+                        img.onerror = () => {
+                            console.warn(`Failed to load emoji: ${name}`);
+                            img.style.display = 'none';
+                        };
+
                         img.onclick = (ev) => {
                             ev.stopPropagation();
                             textarea.value += ` :${name}: `;
@@ -672,15 +718,17 @@ class CommentSystem {
                     picker.innerHTML = '<div style="padding:5px;color:white;font-size:0.8em;">No emojis found</div>';
                 }
 
-                const closeHandler = (ev) => {
+                trigger.after(picker);
+
+                // Set up close handler
+                closeHandler = (ev) => {
                     if (!picker.contains(ev.target) && ev.target !== trigger) {
-                        picker.remove();
+                        picker.style.display = 'none';
                         document.removeEventListener('click', closeHandler);
+                        closeHandler = null;
                     }
                 };
                 setTimeout(() => document.addEventListener('click', closeHandler), 0);
-
-                trigger.after(picker);
             });
         }
     }