ui/js: Optimization tweaks.

basicswap/static/js/offerstable.js

@@ -89,6 +89,73 @@ const totalPagesSpan = document.getElementById('totalPages');
 const lastRefreshTimeSpan = document.getElementById('lastRefreshTime');
 const newEntriesCountSpan = document.getElementById('newEntriesCount');
 
+const ScrollOptimizer = {
+    scrollTimeout: null,
+    isScrolling: false,
+
+    init() {
+        document.body.classList.add('optimize-scroll');
+        window.addEventListener('scroll', this.handleScroll.bind(this), { passive: true });
+    },
+
+    handleScroll() {
+        if (!this.isScrolling) {
+            document.body.classList.add('is-scrolling');
+            this.isScrolling = true;
+        }
+
+        if (this.scrollTimeout) {
+            clearTimeout(this.scrollTimeout);
+        }
+
+        this.scrollTimeout = setTimeout(() => {
+            document.body.classList.remove('is-scrolling');
+            this.isScrolling = false;
+        }, 150);
+    }
+};
+
+const scrollStyles = document.createElement('style');
+scrollStyles.textContent = `
+    .optimize-scroll {
+        -webkit-font-smoothing: antialiased;
+    }
+    
+    .is-scrolling .overflow-x-auto {
+        will-change: transform;
+        pointer-events: none;
+    }
+    
+    .is-scrolling * {
+        animation: none !important;
+        transition: none !important;
+    }
+`;
+document.head.appendChild(scrollStyles);
+
+document.addEventListener('DOMContentLoaded', () => {
+    ScrollOptimizer.init();
+});
+
+let isTableRendering = false;
+const tableContainer = document.querySelector('.overflow-x-auto');
+
+function startTableRender() {
+    isTableRendering = true;
+    if (tableContainer) {
+        tableContainer.style.overflow = 'hidden';
+    }
+}
+
+function finishTableRender() {
+    isTableRendering = false;
+    setTimeout(() => {
+        if (tableContainer) {
+            tableContainer.style.overflow = 'auto';
+        }
+    }, 100);
+}
+
 // MANAGER OBJECTS
 const WebSocketManager = {
     ws: null,
@@ -1388,6 +1455,8 @@ function handleNoOffersScenario() {
 
 async function updateOffersTable() {
     try {
+        startTableRender();
+
         const PRICES_CACHE_KEY = 'prices_coingecko';
         const cachedPrices = CacheManager.get(PRICES_CACHE_KEY);
 
@@ -1426,6 +1495,7 @@ async function updateOffersTable() {
                 cleanupRow(row);
             });
             handleNoOffersScenario();
+            finishTableRender();
             return;
         }
 
@@ -1458,6 +1528,8 @@ async function updateOffersTable() {
             if (tableRateModule?.initializeTable) {
                 tableRateModule.initializeTable();
             }
+            
+            finishTableRender();
         });
 
         lastRefreshTime = Date.now();
@@ -1476,6 +1548,7 @@ async function updateOffersTable() {
                     An error occurred while updating the offers table. Please try again later.
                 </td>
             </tr>`;
+        finishTableRender();
     }
 }