manage

templates/macros.html

@@ -31,28 +31,49 @@ queue_items %}
         <a href="{{ item }}" target="_blank" rel="noreferrer noopener">
             {{ item }}
         </a>
-        {% if not loop.index > qr_limit %}
         <div class="qrcode"></div>
-        {% endif %}
     </li>
     {% endfor %}
 </ol>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/qrcode.js"></script>
 <script>
-    window.addEventListener("load", (_) => {
-        document.querySelectorAll(".qrcode").forEach((e) => {
-            // Find the sibling <a> tag within the same <li>
-            const link = e.parentElement.querySelector("a");
-            const a = link ? link.textContent.trim() : "";
-            if (a) {
-                new QRCode(e, {
-                    text: a,
-                    correctLevel: QRCode.CorrectLevel.L,
-                    width: 256,
-                    height: 256,
+    document.addEventListener("DOMContentLoaded", () => {
+        const observer = new IntersectionObserver(
+            (entries, obs) => {
+                entries.forEach((entry) => {
+                    if (entry.isIntersecting) {
+                        const li = entry.target;
+                        const el = li.querySelector(".qrcode");
+
+                        // Avoid regenerating if already done
+                        if (!el || el.childElementCount > 0) {
+                            obs.unobserve(li);
+                            return;
+                        }
+
+                        const link = li.querySelector("a");
+                        const url = link ? link.textContent.trim() : "";
+
+                        if (url) {
+                            try {
+                                new QRCode(el, {
+                                    text: url,
+                                    correctLevel: QRCode.CorrectLevel.L,
+                                    width: 256,
+                                    height: 256,
+                                });
+                            } catch (e) {
+                                console.error("QR Gen failed", e);
+                            }
+                        }
+                        obs.unobserve(li);
+                    }
                 });
-            }
-        });
+            },
+            { rootMargin: "200px" }
+        );
+
+        document.querySelectorAll(".queue-grid li").forEach((el) => observer.observe(el));
     });
 </script>
 {% endif %} {% endmacro %}