Fix infinite loading on homepage

assets/category_submit.js

@@ -1,41 +1,91 @@
-document.addEventListener('DOMContentLoaded', function() {
+(function() {
     if (window.location.pathname !== '/challenges') return;
 
-    fetch('/category_submit/config')
+    function injectSubmissionBoxes(config) {
-    .then(r => r.json())
+        const enabledCategories = config.categories || [];
-    .then(config => {
+        // Find all category headers
-        if (!config.categories) return;
+        const headers = document.querySelectorAll('.category-header');
         
-        function inject() {
+        headers.forEach(header => {
-            document.querySelectorAll('.category-header').forEach(header => {
             const catName = header.textContent.trim();
-                if (config.categories.includes(catName) && !header.querySelector('.custom-box')) {
+            
+            // 1. Check if category is enabled
+            // 2. Check if we already injected a box (to prevent infinite loops)
+            const alreadyInjected = header.nextElementSibling && 
+                                   header.nextElementSibling.classList.contains('custom-cat-sub-box');
+
+            if (enabledCategories.includes(catName) && !alreadyInjected) {
                 const div = document.createElement('div');
-                    div.className = "custom-box input-group mt-2 mb-4 p-2 bg-light border rounded";
+                div.className = "custom-cat-sub-box input-group mt-2 mb-4 p-3 bg-light border rounded";
+                div.style.maxWidth = "500px"; // Keep it tidy
                 div.innerHTML = `
-                        <input type="text" class="form-control" placeholder="Found a flag for ${catName}?" id="in-${catName}">
+                    <input type="text" class="form-control" placeholder="Found a flag for ${catName}?" id="in-${catName.replace(/\s+/g, '-')}" autocomplete="off">
-                        <div class="input-group-append"><button class="btn btn-success btn-sub" data-cat="${catName}">Submit</button></div>
+                    <div class="input-group-append">
+                        <button class="btn btn-success btn-sub" data-cat="${catName}">Submit</button>
+                    </div>
                 `;
+                
                 header.after(div);
 
+                // Submission logic
                 div.querySelector('button').onclick = function() {
                     const btn = this;
-                        const val = document.getElementById(`in-${catName}`).value;
+                    const input = document.getElementById(`in-${catName.replace(/\s+/g, '-')}`);
+                    const val = input.value.trim();
+                    if (!val) return;
+
                     btn.disabled = true;
                     
-                        const body = new URLSearchParams({ submission: val, category: catName, nonce: init.csrfNonce });
+                    const params = new URLSearchParams({
-                        fetch('/category_submit', { method: 'POST', headers: {'Content-Type': 'application/x-www-form-urlencoded'}, body: body })
+                        submission: val,
+                        category: catName,
+                        nonce: init.csrfNonce
+                    });
+
+                    fetch('/category_submit', {
+                        method: 'POST',
+                        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
+                        body: params
+                    })
                     .then(r => r.json())
                     .then(data => {
                         alert(data.message);
-                            if(data.success) location.reload();
+                        if (data.success) {
+                            location.reload(); // Refresh to show the checkmark on the challenge
+                        }
+                        btn.disabled = false;
+                    })
+                    .catch(() => {
+                        alert("Error submitting flag.");
                         btn.disabled = false;
                     });
                 };
             }
         });
     }
-        // Watch for CTFd's dynamic challenge loading
+
-        new MutationObserver(inject).observe(document.body, { childList: true, subtree: true });
+    // Initialize the plugin
-    });
+    fetch('/category_submit/config')
+        .then(r => r.json())
+        .then(config => {
+            // Run once on load
+            injectSubmissionBoxes(config);
+
+            // Observe the challenge board for changes (e.g. category filtering/loading)
+            // We use a debounce timer to avoid the "Loading Forever" infinite loop
+            let timeout;
+            const observer = new MutationObserver(() => {
+                clearTimeout(timeout);
+                timeout = setTimeout(() => {
+                    // Temporarily disconnect to avoid observing our own changes
+                    observer.disconnect();
+                    injectSubmissionBoxes(config);
+                    // Re-observe after injection
+                    observer.observe(document.body, { childList: true, subtree: true });
+                }, 200); 
             });
+
+            observer.observe(document.body, { childList: true, subtree: true });
+        })
+        .catch(err => console.error("Could not load category submission config", err));
+})();