make peer.directory updates smoother

plugin-sites/peer.directory/www/index.html

@@ -554,9 +554,16 @@
       // Get current visible domains (first currentLimit items after sorting)
       const visibleDomains = allDomains.slice(0, currentLimit);
 
-      // For now, do a targeted update rather than full re-render
+      // For bulk updates with many changes, do a clean re-render to maintain consistency
-      // This preserves scroll position and provides better UX
+      // For smaller changes, the individual add/remove functions handle it seamlessly
-      renderDomains(visibleDomains, false);
+      if (addedDomains.length + removedDomains.length + changedDomains.length > 3) {
+        // Too many changes, do a clean re-render
+        renderDomains(visibleDomains, false);
+      } else {
+        // Handle individual changes seamlessly
+        // Note: individual add/remove handlers already updated the UI
+      }
+
       updatePaginationInfo(1, totalDomains, currentLimit);
 
       // Update few-rows class if needed
@@ -570,6 +577,60 @@
       }
     }
 
+    // Add domain to table seamlessly without re-rendering
+    function seamlesslyAddDomain(domainData) {
+      const domainList = document.getElementById('domainList');
+      const tableContainer = document.querySelector('.table-container');
+
+      // Only add if we have fewer than currentLimit visible rows
+      const visibleRows = Array.from(domainList.children).filter(row =>
+        row.style.display !== 'none' && !row.classList.contains('filtered-out')
+      );
+
+      if (visibleRows.length < currentLimit) {
+        // Create and insert the new row
+        const newRow = renderDomain(domainData);
+        domainList.appendChild(newRow);
+
+        // Update few-rows class if needed
+        const totalRows = domainList.querySelectorAll('tr').length;
+        if (totalRows <= 5) {
+          tableContainer.classList.add('few-rows');
+        }
+      }
+    }
+
+    // Remove domain from table seamlessly without re-rendering
+    function seamlesslyRemoveDomain(domainName) {
+      const domainList = document.getElementById('domainList');
+      const tableContainer = document.querySelector('.table-container');
+
+      // Find and remove the row
+      const rows = Array.from(domainList.children);
+      const rowToRemove = rows.find(row => {
+        const link = row.querySelector('a');
+        return link && link.textContent === domainName;
+      });
+
+      if (rowToRemove) {
+        // Add fade-out animation before removing
+        rowToRemove.style.transition = 'opacity 0.2s ease-out';
+        rowToRemove.style.opacity = '0';
+
+        setTimeout(() => {
+          if (rowToRemove.parentNode) {
+            rowToRemove.parentNode.removeChild(rowToRemove);
+
+            // Update few-rows class if needed
+            const totalRows = domainList.querySelectorAll('tr').length;
+            if (totalRows > 5) {
+              tableContainer.classList.remove('few-rows');
+            }
+          }
+        }, 200);
+      }
+    }
+
     // Show brief visual indicator for updates
     function showUpdateIndicator() {
       // Add a subtle highlight effect to the table container
@@ -650,11 +711,10 @@
             sortDomains(currentSort);
             showUpdateIndicator();
 
-            // Update UI if not searching
+            // Update UI seamlessly if not searching
             const searchQuery = document.getElementById('searchInput').value;
             if (!searchQuery) {
-              const visibleDomains = allDomains.slice(0, currentLimit);
+              seamlesslyAddDomain(data.data);
-              renderDomains(visibleDomains, false);
               updatePaginationInfo(1, allDomains.length, currentLimit);
               totalDomains = allDomains.length;
             }
@@ -671,14 +731,13 @@
           allDomains = allDomains.filter(d => d.domain !== data.domain);
 
           if (allDomains.length !== initialLength) {
-            sortDomains(currentSort);
+            // Don't re-sort on removal, just update UI
             showUpdateIndicator();
 
-            // Update UI if not searching
+            // Update UI seamlessly if not searching
             const searchQuery = document.getElementById('searchInput').value;
             if (!searchQuery) {
-              const visibleDomains = allDomains.slice(0, currentLimit);
+              seamlesslyRemoveDomain(data.domain);
-              renderDomains(visibleDomains, false);
               updatePaginationInfo(1, allDomains.length, currentLimit);
               totalDomains = allDomains.length;
             }