Schedule public snapshot refreshes and optimize historical loading
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
(() => {
|
||||
const RECENT_MATCHES_ENDPOINT = "/api/historical/recent-matches";
|
||||
const RECENT_MATCHES_ENDPOINT = "/api/historical/snapshots/recent-matches";
|
||||
const REFRESH_DELAYS_MS = [150, 1000, 3000, 6000];
|
||||
const RECENT_MATCHES_POLL_INTERVAL_MS = 60000;
|
||||
const RECENT_MATCHES_LIMIT = 100;
|
||||
const DEFAULT_RECENT_MATCHES_PAGE_SIZE = 10;
|
||||
const RECENT_MATCHES_PAGE_SIZES = Object.freeze([10, 25, 50, 100]);
|
||||
@@ -26,6 +27,9 @@
|
||||
void refreshDynamicRecentMatches();
|
||||
}, delay);
|
||||
});
|
||||
window.setInterval(() => {
|
||||
void refreshDynamicRecentMatches();
|
||||
}, RECENT_MATCHES_POLL_INTERVAL_MS);
|
||||
|
||||
document.querySelectorAll("[data-server-slug]").forEach((button) => {
|
||||
button.addEventListener("click", () => {
|
||||
@@ -360,4 +364,4 @@
|
||||
.replaceAll('"', """)
|
||||
.replaceAll("'", "'");
|
||||
}
|
||||
})();
|
||||
})();
|
||||
|
||||
@@ -175,7 +175,7 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
`Preparando datos ${activeTimeframeConfig.shortLabel}...`,
|
||||
);
|
||||
resetRecentMatchesPagination();
|
||||
recentListNode.innerHTML = "";
|
||||
renderRecentMatchesLoading(recentListNode);
|
||||
recentNoteNode.textContent = buildRecentMatchesNote(activeServerSlug);
|
||||
setState(recentStateNode, "Cargando partidas recientes...");
|
||||
setSnapshotMeta(recentSnapshotMetaNode, "Cargando datos de partidas...");
|
||||
@@ -637,6 +637,8 @@ function hydrateWeeklyLeaderboard(
|
||||
function hydrateRecentMatches(result, stateNode, listNode, snapshotMetaNode) {
|
||||
const emptyState = getHistoricalEmptyState(activeServerSlug);
|
||||
if (result.status !== "fulfilled") {
|
||||
resetRecentMatchesPagination();
|
||||
listNode.innerHTML = "";
|
||||
setState(stateNode, "No se pudieron cargar las partidas recientes.", true);
|
||||
setSnapshotMeta(snapshotMetaNode, "Error al leer los datos de partidas.");
|
||||
return;
|
||||
@@ -666,6 +668,34 @@ function hydrateRecentMatches(result, stateNode, listNode, snapshotMetaNode) {
|
||||
stateNode.hidden = true;
|
||||
}
|
||||
|
||||
function renderRecentMatchesLoading(listNode) {
|
||||
if (!listNode) {
|
||||
return;
|
||||
}
|
||||
|
||||
listNode.innerHTML = Array.from({ length: 3 }, (_, index) => `
|
||||
<article class="historical-match-card historical-match-card--clean" aria-hidden="true">
|
||||
<div class="historical-match-card__top historical-match-card__top--clean">
|
||||
<h3 class="historical-match-card__title">Cargando partida ${index + 1}</h3>
|
||||
</div>
|
||||
<div class="historical-match-meta historical-match-meta--clean">
|
||||
<article>
|
||||
<p class="historical-match-meta__label">Mapa</p>
|
||||
<strong>Preparando registro</strong>
|
||||
</article>
|
||||
<article>
|
||||
<p class="historical-match-meta__label">Cierre</p>
|
||||
<strong>...</strong>
|
||||
</article>
|
||||
<article>
|
||||
<p class="historical-match-meta__label">Resultado</p>
|
||||
<strong>...</strong>
|
||||
</article>
|
||||
</div>
|
||||
</article>
|
||||
`).join("");
|
||||
}
|
||||
|
||||
function initializeRecentMatchesPagination(listNode) {
|
||||
if (!listNode) {
|
||||
return null;
|
||||
|
||||
Reference in New Issue
Block a user