Ecosystem/basicswap
1
0
Fork 0
mirror of https://github.com/basicswap/basicswap.git synced 2025-01-19 17:14:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

ui/js: Optimization tweaks.

Browse source
This commit is contained in:
gerlofvanek 2025-01-10 16:41:34 +01:00
parent 73ab5e7391
commit 9418ea4385
1 changed files with 147 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

221
basicswap/static/js/offerstable.js
View file

@ -89,6 +89,73 @@ const totalPagesSpan = document.getElementById('totalPages');
const lastRefreshTimeSpan = document.getElementById('lastRefreshTime'); const lastRefreshTimeSpan = document.getElementById('lastRefreshTime');
const newEntriesCountSpan = document.getElementById('newEntriesCount'); 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 // MANAGER OBJECTS
const WebSocketManager = { const WebSocketManager = {
ws: null, ws: null,
@ -1387,96 +1454,102 @@ function handleNoOffersScenario() {
} }
async function updateOffersTable() { async function updateOffersTable() {
try { try {
const PRICES_CACHE_KEY = 'prices_coingecko'; startTableRender();
const cachedPrices = CacheManager.get(PRICES_CACHE_KEY);
if (!cachedPrices || !cachedPrices.remainingTime || cachedPrices.remainingTime < 60000) { const PRICES_CACHE_KEY = 'prices_coingecko';
console.log('Fetching fresh price data...'); const cachedPrices = CacheManager.get(PRICES_CACHE_KEY);
const priceData = await fetchLatestPrices();
if (priceData) {
latestPrices = priceData;
}
} else {
latestPrices = cachedPrices.value;
}
const validOffers = getValidOffers(); if (!cachedPrices || !cachedPrices.remainingTime || cachedPrices.remainingTime < 60000) {
console.log('Fetching fresh price data...');
const priceData = await fetchLatestPrices();
if (priceData) {
latestPrices = priceData;
}
} else {
latestPrices = cachedPrices.value;
}
if (!isSentOffers) { const validOffers = getValidOffers();
const networkOffersSpan = document.querySelector('a[href="/offers"] span.inline-flex.justify-center');
if (networkOffersSpan) {
networkOffersSpan.textContent = validOffers.length;
}
}
const startIndex = (currentPage - 1) * itemsPerPage; if (!isSentOffers) {
const endIndex = Math.min(startIndex + itemsPerPage, validOffers.length); const networkOffersSpan = document.querySelector('a[href="/offers"] span.inline-flex.justify-center');
const itemsToDisplay = validOffers.slice(startIndex, endIndex); if (networkOffersSpan) {
networkOffersSpan.textContent = validOffers.length;
}
}
const identityPromises = itemsToDisplay.map(offer => const startIndex = (currentPage - 1) * itemsPerPage;
offer.addr_from ? getIdentityData(offer.addr_from) : Promise.resolve(null) const endIndex = Math.min(startIndex + itemsPerPage, validOffers.length);
); const itemsToDisplay = validOffers.slice(startIndex, endIndex);
const identities = await Promise.all(identityPromises); const identityPromises = itemsToDisplay.map(offer =>
offer.addr_from ? getIdentityData(offer.addr_from) : Promise.resolve(null)
);
if (validOffers.length === 0) { const identities = await Promise.all(identityPromises);
const existingRows = offersBody.querySelectorAll('tr');
existingRows.forEach(row => {
cleanupRow(row);
});
handleNoOffersScenario();
return;
}
const totalPages = Math.max(1, Math.ceil(validOffers.length / itemsPerPage)); if (validOffers.length === 0) {
currentPage = Math.min(currentPage, totalPages); const existingRows = offersBody.querySelectorAll('tr');
existingRows.forEach(row => {
cleanupRow(row);
});
handleNoOffersScenario();
finishTableRender();
return;
}
const fragment = document.createDocumentFragment(); const totalPages = Math.max(1, Math.ceil(validOffers.length / itemsPerPage));
currentPage = Math.min(currentPage, totalPages);
const existingRows = offersBody.querySelectorAll('tr'); const fragment = document.createDocumentFragment();
existingRows.forEach(row => {
cleanupRow(row);
});
itemsToDisplay.forEach((offer, index) => { const existingRows = offersBody.querySelectorAll('tr');
const identity = identities[index]; existingRows.forEach(row => {
const row = createTableRow(offer, identity); cleanupRow(row);
if (row) { });
fragment.appendChild(row);
}
});
offersBody.textContent = ''; itemsToDisplay.forEach((offer, index) => {
offersBody.appendChild(fragment); const identity = identities[index];
const row = createTableRow(offer, identity);
if (row) {
fragment.appendChild(row);
}
});
requestAnimationFrame(() => { offersBody.textContent = '';
initializeFlowbiteTooltips(); offersBody.appendChild(fragment);
updateRowTimes();
updatePaginationControls(totalPages);
if (tableRateModule?.initializeTable) { requestAnimationFrame(() => {
tableRateModule.initializeTable(); initializeFlowbiteTooltips();
} updateRowTimes();
}); updatePaginationControls(totalPages);
lastRefreshTime = Date.now(); if (tableRateModule?.initializeTable) {
if (newEntriesCountSpan) { tableRateModule.initializeTable();
newEntriesCountSpan.textContent = validOffers.length; }
}
if (lastRefreshTimeSpan) { finishTableRender();
lastRefreshTimeSpan.textContent = new Date(lastRefreshTime).toLocaleTimeString(); });
}
} catch (error) { lastRefreshTime = Date.now();
console.error('[Debug] Error in updateOffersTable:', error); if (newEntriesCountSpan) {
offersBody.innerHTML = ` newEntriesCountSpan.textContent = validOffers.length;
<tr> }
<td colspan="8" class="text-center py-4 text-red-500"> if (lastRefreshTimeSpan) {
An error occurred while updating the offers table. Please try again later. lastRefreshTimeSpan.textContent = new Date(lastRefreshTime).toLocaleTimeString();
</td> }
</tr>`;
} } catch (error) {
console.error('[Debug] Error in updateOffersTable:', error);
offersBody.innerHTML = `
<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();
}
} }
async function getIdentityData(address) { async function getIdentityData(address) {