Pricechart fix potential mem leaks.

basicswap/static/js/offerstable.js

@@ -1264,7 +1264,7 @@ function getEmptyPriceData() {
 
 async function fetchLatestPrices() {
     const PRICES_CACHE_KEY = 'prices_coingecko';
-    const RETRY_DELAY = 2000;  // 2 sec
+    const RETRY_DELAY = 5000;
     const MAX_RETRIES = 3;
     
     const cachedData = CacheManager.get(PRICES_CACHE_KEY);
@@ -1652,29 +1652,22 @@ async function updateOffersTable() {
         const PRICES_CACHE_KEY = 'prices_coingecko';
         const cachedPrices = CacheManager.get(PRICES_CACHE_KEY);
         
-        if (!cachedPrices || !cachedPrices.remainingTime || cachedPrices.remainingTime < 80000) {
+        latestPrices = cachedPrices?.value || getEmptyPriceData();
-            console.log('Fetching fresh price data...');
-            const priceData = await fetchLatestPrices();
-            if (priceData) {
-                latestPrices = priceData;
-            }
-        } else {
-            latestPrices = cachedPrices.value;
-        }
 
         const validOffers = getValidOffers();
-
-        if (!isSentOffers) {
-            const networkOffersSpan = document.querySelector('a[href="/offers"] span.inline-flex.justify-center');
-            if (networkOffersSpan) {
-                networkOffersSpan.textContent = validOffers.length;
-            }
-        }
-
         const startIndex = (currentPage - 1) * itemsPerPage;
         const endIndex = Math.min(startIndex + itemsPerPage, validOffers.length);
         const itemsToDisplay = validOffers.slice(startIndex, endIndex);
 
+        fetchLatestPrices().then(freshPrices => {
+            if (freshPrices) {
+                latestPrices = freshPrices;
+                updateProfitLossDisplays();
+            }
+        }).catch(error => {
+            console.warn('Price fetch failed:', error);
+        });
+
         const identityPromises = itemsToDisplay.map(offer =>
             offer.addr_from ? getIdentityData(offer.addr_from) : Promise.resolve(null)
         );
@@ -1682,10 +1675,6 @@ async function updateOffersTable() {
         const identities = await Promise.all(identityPromises);
 
         if (validOffers.length === 0) {
-            const existingRows = offersBody.querySelectorAll('tr');
-            existingRows.forEach(row => {
-                cleanupRow(row);
-            });
             handleNoOffersScenario();
             finishTableRender();
             return;
@@ -1725,25 +1714,47 @@ async function updateOffersTable() {
         });
 
         lastRefreshTime = Date.now();
-        if (newEntriesCountSpan) {
+        updateLastRefreshTime();
-            newEntriesCountSpan.textContent = validOffers.length;
-        }
-        if (lastRefreshTimeSpan) {
-            lastRefreshTimeSpan.textContent = new Date(lastRefreshTime).toLocaleTimeString();
-        }
         
     } catch (error) {
         console.error('[Debug] Error in updateOffersTable:', error);
-        offersBody.innerHTML = `
+        handleTableError();
-            <tr>
-                <td colspan="8" class="text-center py-4 text-red-500">
-                    An error occurred while updating the offers table. Please try again later.
-                </td>
-            </tr>`;
         finishTableRender();
     }
 }
 
+function updateProfitLossDisplays() {
+    const rows = document.querySelectorAll('[data-offer-id]');
+    rows.forEach(row => {
+        const offerId = row.getAttribute('data-offer-id');
+        const offer = jsonData.find(o => o.offer_id === offerId);
+        if (!offer) return;
+
+        const fromAmount = parseFloat(offer.amount_from) || 0;
+        const toAmount = parseFloat(offer.amount_to) || 0;
+        updateProfitLoss(row, offer.coin_from, offer.coin_to, fromAmount, toAmount, offer.is_own_offer);
+
+        const rateTooltipId = `tooltip-rate-${offerId}`;
+        const rateTooltip = document.getElementById(rateTooltipId);
+        if (rateTooltip) {
+            const tooltipContent = createCombinedRateTooltip(offer, offer.coin_from, offer.coin_to, offer.is_own_offer);
+            rateTooltip.innerHTML = tooltipContent;
+        }
+    });
+}
+
+function handleTableError() {
+    offersBody.innerHTML = `
+        <tr>
+            <td colspan="8" class="text-center py-4 text-gray-500">
+                <div class="flex flex-col items-center justify-center gap-2">
+                    <span>An error occurred while updating the table.</span>
+                    <span class="text-sm">The table will continue to function with cached data.</span>
+                </div>
+            </td>
+        </tr>`;
+}
+
 async function getIdentityData(address) {
     try {
         const response = await fetch(`/json/identities/${address}`);

basicswap/static/js/pricechart.js

@@ -487,6 +487,13 @@ const chartModule = {
   chart: null,
   currentCoin: 'BTC',
   loadStartTime: 0,
+  
+  cleanup: () => {
+    if (chartModule.chart) {
+      chartModule.chart.destroy();
+      chartModule.chart = null;
+    }
+  },
   verticalLinePlugin: {
     id: 'verticalLine',
     beforeDraw: (chart, args, options) => {
@@ -509,7 +516,7 @@ const chartModule = {
   },
 
   initChart: () => {
-    const ctx = document.getElementById('coin-chart').getContext('2d');
+    const ctx = document.getElementById('coin-chart')?.getContext('2d');
     if (!ctx) {
       logger.error('Failed to get chart context. Make sure the canvas element exists.');
       return;
@@ -568,7 +575,6 @@ const chartModule = {
               callback: function(value) {
                 const date = new Date(value);
                 if (config.currentResolution === 'day') {
-                  // Convert to AM/PM format
                   return date.toLocaleTimeString('en-US', {
                     hour: 'numeric',
                     minute: '2-digit',
@@ -668,13 +674,10 @@ const chartModule = {
       },
       plugins: [chartModule.verticalLinePlugin]
     });
-
-    //console.log('Chart initialized:', chartModule.chart);
   },
   
   prepareChartData: (coinSymbol, data) => {
     if (!data) {
-      //console.error(`No data received for ${coinSymbol}`);
       return [];
     }
 
@@ -733,7 +736,6 @@ const chartModule = {
           y: price
         }));
       } else {
-        //console.error(`Unexpected data structure for ${coinSymbol}:`, data);
         return [];
       }
 
@@ -742,7 +744,6 @@ const chartModule = {
         y: point.y
       }));
     } catch (error) {
-      //console.error(`Error preparing chart data for ${coinSymbol}:`, error);
       return [];
     }
   },
@@ -780,21 +781,17 @@ const chartModule = {
       
       if (cachedData && Object.keys(cachedData.value).length > 0) {
         data = cachedData.value;
-        //console.log(`Using cached data for ${coinSymbol} (${config.currentResolution})`);
       } else {
-        //console.log(`Fetching fresh data for ${coinSymbol} (${config.currentResolution})`);
         const allData = await api.fetchHistoricalDataXHR([coinSymbol]);
         data = allData[coinSymbol];
         if (!data || Object.keys(data).length === 0) {
           throw new Error(`No data returned for ${coinSymbol}`);
         }
-        //console.log(`Caching new data for ${cacheKey}`);
         cache.set(cacheKey, data, config.cacheTTL);
         cachedData = null;
       }
 
       const chartData = chartModule.prepareChartData(coinSymbol, data);
-      //console.log(`Prepared chart data for ${coinSymbol}:`, chartData.slice(0, 5));
 
       if (chartData.length === 0) {
         throw new Error(`No valid chart data for ${coinSymbol}`);
@@ -826,7 +823,6 @@ const chartModule = {
 
         chartModule.chart.update('active');
       } else {
-        //console.error('Chart object not initialized');
         throw new Error('Chart object not initialized');
       }
 
@@ -835,7 +831,6 @@ const chartModule = {
       ui.updateLoadTimeAndCache(loadTime, cachedData);
 
     } catch (error) {
-      //console.error(`Error updating chart for ${coinSymbol}:`, error);
       ui.displayErrorMessage(`Failed to update chart for ${coinSymbol}: ${error.message}`);
     } finally {
       chartModule.hideChartLoader();
@@ -847,7 +842,6 @@ const chartModule = {
     const chart = document.getElementById('coin-chart');
     
     if (!loader || !chart) {
-      //console.warn('Chart loader or chart container elements not found');
       return;
     }
     
@@ -860,49 +854,61 @@ const chartModule = {
     const chart = document.getElementById('coin-chart');
     
     if (!loader || !chart) {
-      //console.warn('Chart loader or chart container elements not found');
       return;
     }
     
     loader.classList.add('hidden');
     chart.classList.remove('hidden');    
-  },
+  }
 };
 
 Chart.register(chartModule.verticalLinePlugin);
 
-  const volumeToggle = {
+const volumeToggle = {
   isVisible: localStorage.getItem('volumeToggleState') === 'true',
+  
+  cleanup: () => {
+    const toggleButton = document.getElementById('toggle-volume');
+    if (toggleButton) {
+      toggleButton.removeEventListener('click', volumeToggle.toggle);
+    }
+  },
+
   init: () => {
+    volumeToggle.cleanup();
+    
     const toggleButton = document.getElementById('toggle-volume');
     if (toggleButton) {
       toggleButton.addEventListener('click', volumeToggle.toggle);
       volumeToggle.updateVolumeDisplay();
     }
   },
+
   toggle: () => {
     volumeToggle.isVisible = !volumeToggle.isVisible;
     localStorage.setItem('volumeToggleState', volumeToggle.isVisible.toString());
     volumeToggle.updateVolumeDisplay();
   },
+
   updateVolumeDisplay: () => {
     const volumeDivs = document.querySelectorAll('[id$="-volume-div"]');
     volumeDivs.forEach(div => {
       div.style.display = volumeToggle.isVisible ? 'flex' : 'none';
     });
+
     const toggleButton = document.getElementById('toggle-volume');
     if (toggleButton) {
       updateButtonStyles(toggleButton, volumeToggle.isVisible, 'green');
     }
   }
-  };
+};
 
-  function updateButtonStyles(button, isActive, color) {
+function updateButtonStyles(button, isActive, color) {
   button.classList.toggle('text-' + color + '-500', isActive);
   button.classList.toggle('text-gray-600', !isActive);
   button.classList.toggle('dark:text-' + color + '-400', isActive);
   button.classList.toggle('dark:text-gray-400', !isActive);
-  }
+}
 
 const app = {
   btcPriceUSD: 0,
@@ -918,12 +924,109 @@ const app = {
   },
   cacheTTL: 5 * 60 * 1000, // 5 minutes
   minimumRefreshInterval: 60 * 1000, // 1 minute
+  eventListeners: new Map(),
+  visibilityCleanup: null,
+
+  cleanup: () => {
+    if (app.autoRefreshInterval) {
+      clearTimeout(app.autoRefreshInterval);
+      app.autoRefreshInterval = null;
+    }
+
+    if (app.updateNextRefreshTimeRAF) {
+      cancelAnimationFrame(app.updateNextRefreshTimeRAF);
+      app.updateNextRefreshTimeRAF = null;
+    }
+
+    if (typeof app.visibilityCleanup === 'function') {
+      app.visibilityCleanup();
+      app.visibilityCleanup = null;
+    }
+    
+    volumeToggle.cleanup();
+
+    app.removeEventListeners();
+
+    if (chartModule.chart) {
+      chartModule.chart.destroy();
+      chartModule.chart = null;
+    }
+
+    cache.clear();
+  },
+
+  removeEventListeners: () => {
+    app.eventListeners.forEach((listener, element) => {
+      if (element && typeof element.removeEventListener === 'function') {
+        element.removeEventListener(listener.type, listener.fn);
+      }
+    });
+    app.eventListeners.clear();
+  },
+
+  addEventListenerWithCleanup: (element, type, fn) => {
+    if (element && typeof element.addEventListener === 'function') {
+      element.addEventListener(type, fn);
+      app.eventListeners.set(element, { type, fn });
+    }
+  },
+
+  initResolutionButtons: () => {
+    const resolutionButtons = document.querySelectorAll('.resolution-button');
+    resolutionButtons.forEach(button => {
+      // Remove existing listeners first
+      const oldListener = button.getAttribute('data-resolution-listener');
+      if (oldListener && window[oldListener]) {
+        button.removeEventListener('click', window[oldListener]);
+        delete window[oldListener];
+      }
+      
+      const listener = () => {
+        const resolution = button.id.split('-')[1];
+        const currentCoin = chartModule.currentCoin;
+        
+        if (currentCoin !== 'WOW' || resolution === 'day') {
+          config.currentResolution = resolution;
+          chartModule.updateChart(currentCoin, true);
+          app.updateResolutionButtons(currentCoin);
+        }
+      };
+
+      const listenerName = `resolutionListener_${button.id}`;
+      window[listenerName] = listener;
+      button.setAttribute('data-resolution-listener', listenerName);
+      button.addEventListener('click', listener);
+    });
+  },
+
+  setupVisibilityHandler: () => {
+  const cleanup = () => {
+    if (window.visibilityHandler) {
+      document.removeEventListener('visibilitychange', window.visibilityHandler);
+      delete window.visibilityHandler;
+    }
+  };
+
+  cleanup();
+
+  window.visibilityHandler = () => {
+    if (!document.hidden && chartModule.chart) {
+      chartModule.updateChart(chartModule.currentCoin, true);
+    }
+  };
+
+  document.addEventListener('visibilitychange', window.visibilityHandler);
+  return cleanup;
+},
 
   init: () => {
     console.log('Initializing app...');
+    app.cleanup();
     window.addEventListener('load', app.onLoad);
     app.loadLastRefreshedTime();
     app.updateAutoRefreshButton();
+    app.initResolutionButtons();
+    app.setupVisibilityHandler();
     console.log('App initialized');
   },
 
@@ -937,8 +1040,6 @@ const app = {
       if (chartContainer) {
         chartModule.initChart();
         chartModule.showChartLoader();
-    } else {
-      //console.warn('Chart container not found, skipping chart initialization');
       }
       
       console.log('Loading all coin data...');
@@ -951,13 +1052,11 @@ const app = {
       }
       ui.setActiveContainer('btc-container');
       
-    //console.log('Setting up event listeners and initializations...');
       app.setupEventListeners();
       app.initializeSelectImages();
       app.initAutoRefresh();
       
     } catch (error) {
-    //console.error('Error during initialization:', error);
       ui.displayErrorMessage('Failed to initialize the dashboard. Please try refreshing the page.');
     } finally {
       ui.hideLoader();
@@ -966,10 +1065,9 @@ const app = {
       }
       console.log('App onLoad completed');
     }
-},
+  },
 
   loadAllCoinData: async () => {
-        //console.log('Loading data for all coins...');
     try {
       const allCoinData = await api.fetchCoinGeckoDataXHR();
       if (allCoinData.error) {
@@ -983,25 +1081,18 @@ const app = {
           ui.displayCoinData(coin.symbol, coinData);
           const cacheKey = `coinData_${coin.symbol}`;
           cache.set(cacheKey, coinData);
-                } else {
-                    //console.warn(`No data found for ${coin.symbol}`);
         }
       }
     } catch (error) {
-            //console.error('Error loading all coin data:', error);
       ui.displayErrorMessage('Failed to load coin data. Please try refreshing the page.');
-        } finally {
-            //console.log('All coin data loaded');
     }
   },
 
   loadCoinData: async (coin) => {
-    //console.log(`Loading data for ${coin.symbol}...`);
     const cacheKey = `coinData_${coin.symbol}`;
     let cachedData = cache.get(cacheKey);
     let data;
     if (cachedData) {
-      //console.log(`Using cached data for ${coin.symbol}`);
       data = cachedData.value;
     } else {
       try {
@@ -1014,11 +1105,9 @@ const app = {
         if (data.error) {
           throw new Error(data.error);
         }
-        //console.log(`Caching new data for ${coin.symbol}`);
         cache.set(cacheKey, data);
         cachedData = null;
       } catch (error) {
-        //console.error(`Error fetching ${coin.symbol} data:`, error.message);
         data = {
           error: error.message
         };
@@ -1028,16 +1117,13 @@ const app = {
     }
     ui.displayCoinData(coin.symbol, data);
     ui.updateLoadTimeAndCache(0, cachedData);
-    //console.log(`Data loaded for ${coin.symbol}`);
   },
 
   setupEventListeners: () => {
-    //console.log('Setting up event listeners...');
     config.coins.forEach(coin => {
       const container = document.getElementById(`${coin.symbol.toLowerCase()}-container`);
       if (container) {
-        container.addEventListener('click', () => {
+        app.addEventListenerWithCleanup(container, 'click', () => {
-          //console.log(`${coin.symbol} container clicked`);
           ui.setActiveContainer(`${coin.symbol.toLowerCase()}-container`);
           if (chartModule.chart) {
             if (coin.symbol === 'WOW') {
@@ -1052,26 +1138,27 @@ const app = {
     
     const refreshAllButton = document.getElementById('refresh-all');
     if (refreshAllButton) {
-      refreshAllButton.addEventListener('click', app.refreshAllData);
+      app.addEventListenerWithCleanup(refreshAllButton, 'click', app.refreshAllData);
     }
     
     const headers = document.querySelectorAll('th');
     headers.forEach((header, index) => {
-      header.addEventListener('click', () => app.sortTable(index, header.classList.contains('disabled')));
+      app.addEventListenerWithCleanup(header, 'click', () => 
+        app.sortTable(index, header.classList.contains('disabled'))
+      );
     });
     
     const closeErrorButton = document.getElementById('close-error');
     if (closeErrorButton) {
-      closeErrorButton.addEventListener('click', ui.hideErrorMessage);
+      app.addEventListenerWithCleanup(closeErrorButton, 'click', ui.hideErrorMessage);
     }
-    //console.log('Event listeners set up');
   },
 
   initAutoRefresh: () => {
     console.log('Initializing auto-refresh...');
     const toggleAutoRefreshButton = document.getElementById('toggle-auto-refresh');
     if (toggleAutoRefreshButton) {
-      toggleAutoRefreshButton.addEventListener('click', app.toggleAutoRefresh);
+      app.addEventListenerWithCleanup(toggleAutoRefreshButton, 'click', app.toggleAutoRefresh);
       app.updateAutoRefreshButton();
     }
 
@@ -1100,7 +1187,6 @@ const app = {
             earliestExpiration = Math.min(earliestExpiration, cachedItem.expiresAt);
           }
         } catch (error) {
-          //console.error(`Error parsing cached item ${key}:`, error);
           localStorage.removeItem(key);
         }
       }
@@ -1138,9 +1224,7 @@ const app = {
     chartModule.showChartLoader();
     
     try {
-
       cache.clear();
-            
       await app.updateBTCPrice();
       
       const allCoinData = await api.fetchCoinGeckoDataXHR();
@@ -1153,13 +1237,9 @@ const app = {
         const coinData = allCoinData[symbol];
         if (coinData) {
           coinData.displayName = coin.displayName || coin.symbol;
-
           ui.displayCoinData(coin.symbol, coinData);
-
           const cacheKey = `coinData_${coin.symbol}`;
           cache.set(cacheKey, coinData);
-                } else {
-                    //console.error(`No data found for ${coin.symbol}`);
         }
       }
       
@@ -1171,10 +1251,7 @@ const app = {
       localStorage.setItem('lastRefreshedTime', app.lastRefreshedTime.getTime().toString());
       ui.updateLastRefreshedTime();
       
-            console.log('All data refreshed successfully');
-            
     } catch (error) {
-            //console.error('Error refreshing all data:', error);
       ui.displayErrorMessage('Failed to refresh all data. Please try again.');
     } finally {
       ui.hideLoader();
@@ -1215,6 +1292,7 @@ const app = {
             app.updateNextRefreshTimeRAF = requestAnimationFrame(updateDisplay);
           }
         };
+        
         updateDisplay();
       } else {
         labelElement.textContent = '';
@@ -1241,7 +1319,6 @@ const app = {
   },
 
   startSpinAnimation: () => {
-    //console.log('Starting spin animation on auto-refresh button');
     const svg = document.querySelector('#toggle-auto-refresh svg');
     if (svg) {
       svg.classList.add('animate-spin');
@@ -1252,7 +1329,6 @@ const app = {
   },
 
   stopSpinAnimation: () => {
-    //console.log('Stopping spin animation on auto-refresh button');
     const svg = document.querySelector('#toggle-auto-refresh svg');
     if (svg) {
       svg.classList.remove('animate-spin');
@@ -1260,7 +1336,6 @@ const app = {
   },
 
   updateLastRefreshedTime: () => {
-    //console.log('Updating last refreshed time');
     const lastRefreshedElement = document.getElementById('last-refreshed-time');
     if (lastRefreshedElement && app.lastRefreshedTime) {
       const formattedTime = app.lastRefreshedTime.toLocaleTimeString();
@@ -1278,45 +1353,37 @@ const app = {
   },
 
   updateBTCPrice: async () => {
-        //console.log('Updating BTC price...');
     try {
       const priceData = await api.fetchCoinGeckoDataXHR();
       if (priceData.error) {
-                //console.error('Error fetching BTC price:', priceData.error);
         app.btcPriceUSD = 0;
       } else if (priceData.btc && priceData.btc.current_price) {
-
         app.btcPriceUSD = priceData.btc.current_price;
       } else {
-                //console.error('Unexpected BTC data structure:', priceData);
         app.btcPriceUSD = 0;
       }
     } catch (error) {
-            //console.error('Error fetching BTC price:', error);
       app.btcPriceUSD = 0;
     }
-        //console.log('Current BTC price:', app.btcPriceUSD);
   },
 
-sortTable: (columnIndex) => {
+  sortTable: (columnIndex) => {
-  //console.log(`Sorting column: ${columnIndex}`);
     const sortableColumns = [0, 5, 6, 7]; // 0: Time, 5: Rate, 6: Market +/-, 7: Trade
     if (!sortableColumns.includes(columnIndex)) {
-    //console.log(`Column ${columnIndex} is not sortable`);
       return;
     }
+    
     const table = document.querySelector('table');
     if (!table) {
-    //console.error("Table not found for sorting.");
       return;
     }
+    
     const rows = Array.from(table.querySelectorAll('tbody tr'));
-  console.log(`Found ${rows.length} rows to sort`);
     const sortIcon = document.getElementById(`sort-icon-${columnIndex}`);
     if (!sortIcon) {
-    //console.error("Sort icon not found.");
       return;
     }
+    
     const sortOrder = sortIcon.textContent === '↓' ? 1 : -1;
     sortIcon.textContent = sortOrder === 1 ? '↑' : '↓';
 
@@ -1328,7 +1395,6 @@ sortTable: (columnIndex) => {
         case 1: // Time column
           aValue = getSafeTextContent(a.querySelector('td:first-child .text-xs:first-child'));
           bValue = getSafeTextContent(b.querySelector('td:first-child .text-xs:first-child'));
-        //console.log(`Comparing times: "${aValue}" vs "${bValue}"`);
 
           const parseTime = (timeStr) => {
             const [value, unit] = timeStr.split(' ');
@@ -1347,7 +1413,6 @@ sortTable: (columnIndex) => {
         case 6: // Market +/-
           aValue = getSafeTextContent(a.cells[columnIndex]);
           bValue = getSafeTextContent(b.cells[columnIndex]);
-        //console.log(`Comparing values: "${aValue}" vs "${bValue}"`);
 
           aValue = parseFloat(aValue.replace(/[^\d.-]/g, '') || '0');
           bValue = parseFloat(bValue.replace(/[^\d.-]/g, '') || '0');
@@ -1356,8 +1421,6 @@ sortTable: (columnIndex) => {
         case 7: // Trade
           const aCell = a.cells[columnIndex];
           const bCell = b.cells[columnIndex];
-        //console.log('aCell:', aCell ? aCell.outerHTML : 'null');
-        //console.log('bCell:', bCell ? bCell.outerHTML : 'null');
           
           aValue = getSafeTextContent(aCell.querySelector('a')) || 
                    getSafeTextContent(aCell.querySelector('button')) || 
@@ -1369,8 +1432,6 @@ sortTable: (columnIndex) => {
           aValue = aValue.toLowerCase();
           bValue = bValue.toLowerCase();
           
-        //console.log(`Comparing trade actions: "${aValue}" vs "${bValue}"`);
-        
           if (aValue === bValue) return 0;
           if (aValue === "swap") return -1 * sortOrder;
           if (bValue === "swap") return 1 * sortOrder;
@@ -1379,7 +1440,6 @@ sortTable: (columnIndex) => {
         default:
           aValue = getSafeTextContent(a.cells[columnIndex]);
           bValue = getSafeTextContent(b.cells[columnIndex]);
-        //console.log(`Comparing default values: "${aValue}" vs "${bValue}"`);
           return aValue.localeCompare(bValue, undefined, {
             numeric: true,
             sensitivity: 'base'
@@ -1389,23 +1449,29 @@ sortTable: (columnIndex) => {
 
     const tbody = table.querySelector('tbody');
     if (tbody) {
-    rows.forEach(row => tbody.appendChild(row));
+      const fragment = document.createDocumentFragment();
-  } else {
+      rows.forEach(row => fragment.appendChild(row));
-    //console.error("Table body not found.");
+      tbody.appendChild(fragment);
     }
-  //console.log('Sorting completed');
+  },
-},
 
   initializeSelectImages: () => {
     const updateSelectedImage = (selectId) => {
       const select = document.getElementById(selectId);
       const button = document.getElementById(`${selectId}_button`);
       if (!select || !button) {
-        //console.error(`Elements not found for ${selectId}`);
         return;
       }
+
+      const oldListener = select.getAttribute('data-change-listener');
+      if (oldListener && window[oldListener]) {
+        select.removeEventListener('change', window[oldListener]);
+        delete window[oldListener];
+      }
+
       const selectedOption = select.options[select.selectedIndex];
       const imageURL = selectedOption?.getAttribute('data-image');
+
       requestAnimationFrame(() => {
         if (imageURL) {
           button.style.backgroundImage = `url('${imageURL}')`;
@@ -1419,21 +1485,24 @@ sortTable: (columnIndex) => {
         button.style.minHeight = '25px';
       });
     };
-    const handleSelectChange = (event) => {
+
-      updateSelectedImage(event.target.id);
-    };
     ['coin_to', 'coin_from'].forEach(selectId => {
       const select = document.getElementById(selectId);
       if (select) {
-        select.addEventListener('change', handleSelectChange);
+
+        const listenerName = `selectChangeListener_${selectId}`;
+        window[listenerName] = () => updateSelectedImage(selectId);
+
+        select.setAttribute('data-change-listener', listenerName);
+
+        select.addEventListener('change', window[listenerName]);
+
         updateSelectedImage(selectId);
-      } else {
-        //console.error(`Select element not found for ${selectId}`);
       }
     });
   },
 
-updateResolutionButtons: (coinSymbol) => {
+  updateResolutionButtons: (coinSymbol) => {
     const resolutionButtons = document.querySelectorAll('.resolution-button');
     resolutionButtons.forEach(button => {
       const resolution = button.id.split('-')[1];
@@ -1453,12 +1522,13 @@ updateResolutionButtons: (coinSymbol) => {
         button.disabled = false;
       }
     });
-},
+  },
 
   toggleAutoRefresh: () => {
     console.log('Toggling auto-refresh');
     app.isAutoRefreshEnabled = !app.isAutoRefreshEnabled;
     localStorage.setItem('autoRefreshEnabled', app.isAutoRefreshEnabled.toString());
+    
     if (app.isAutoRefreshEnabled) {
       console.log('Auto-refresh enabled, scheduling next refresh');
       app.scheduleNextRefresh();
@@ -1471,31 +1541,18 @@ updateResolutionButtons: (coinSymbol) => {
       app.nextRefreshTime = null;
       localStorage.removeItem('nextRefreshTime');
     }
+    
     app.updateAutoRefreshButton();
     app.updateNextRefreshTime();
   }
 };
 
-const resolutionButtons = document.querySelectorAll('.resolution-button');
-resolutionButtons.forEach(button => {
-  button.addEventListener('click', () => {
-    const resolution = button.id.split('-')[1];
-    const currentCoin = chartModule.currentCoin;
-    
-    if (currentCoin !== 'WOW' || resolution === 'day') {
-      config.currentResolution = resolution;
-      chartModule.updateChart(currentCoin, true);
-      app.updateResolutionButtons(currentCoin);
-    }
-  });
-});
 
 // LOAD
 app.init();
+app.visibilityCleanup = app.setupVisibilityHandler();
 
-document.addEventListener('visibilitychange', () => {
+window.addEventListener('beforeunload', () => {
-    if (!document.hidden && chartModule.chart) {
+  console.log('Page unloading, cleaning up...');
-        console.log('Page became visible, reinitializing chart');
+  app.cleanup();
-        chartModule.updateChart(chartModule.currentCoin, true);
-    }
 });