ui change to improve tag list load

app/static/js/tag-editor.js

@@ -13,30 +13,31 @@ document.addEventListener('DOMContentLoaded', () => {
 
   let currentTagCard = null;
 
-  // Open modal when edit button clicked
-  document.querySelectorAll('.tag-edit-btn').forEach(btn => {
-    btn.addEventListener('click', async (e) => {
-      e.preventDefault();
-      e.stopPropagation();
+  // Open modal when edit button clicked (using event delegation for infinite scroll)
+  document.addEventListener('click', async (e) => {
+    const btn = e.target.closest('.tag-edit-btn');
+    if (!btn) return;
 
-      const tagId = btn.dataset.tagId;
-      currentTagCard = btn.closest('.tag-card');
+    e.preventDefault();
+    e.stopPropagation();
 
-      // Fetch tag details
-      try {
-        const res = await fetch(`/api/tag/${tagId}`);
-        const data = await res.json();
+    const tagId = btn.dataset.tagId;
+    currentTagCard = btn.closest('.tag-card');
 
-        if (data.ok) {
-          tagIdInput.value = data.tag.id;
-          nameInput.value = data.tag.display_name;
-          kindSelect.value = data.tag.kind || 'user';
-          modal.classList.add('active');
-        }
-      } catch (err) {
-        console.error('Failed to load tag:', err);
+    // Fetch tag details
+    try {
+      const res = await fetch(`/api/tag/${tagId}`);
+      const data = await res.json();
+
+      if (data.ok) {
+        tagIdInput.value = data.tag.id;
+        nameInput.value = data.tag.display_name;
+        kindSelect.value = data.tag.kind || 'user';
+        modal.classList.add('active');
       }
-    });
+    } catch (err) {
+      console.error('Failed to load tag:', err);
+    }
   });
 
   // Close modal

app/static/style.css

@@ -1825,6 +1825,32 @@ select.form-input optgroup {
   border-top: 1px solid rgba(255,255,255,0.05);
 }
 
+/* Infinite scroll loading indicator */
+.loading-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  padding: 2rem;
+  color: var(--text-muted);
+}
+
+.loading-indicator .spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border: 2px solid rgba(255,255,255,0.2);
+  border-top-color: var(--btn-primary);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+/* Scroll sentinel for IntersectionObserver */
+.scroll-sentinel {
+  height: 1px;
+  width: 100%;
+}
+
 /* Play overlay with triangle icon */
 .play-overlay::before {
   content: '';