From 762f75ad62f01d4b6122f8e7b95a0ba8248b9e54 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Sun, 21 Dec 2025 21:30:29 +0000 Subject: [PATCH] Add loading indicators to user statistics page Co-authored-by: mathieumoran1 --- public/js/app_user-stat.js | 31 ++++++++++++++++++++++++++++--- public/user-stat.html | 24 ++++++++++++++++++++---- 2 files changed, 48 insertions(+), 7 deletions(-) diff --git a/public/js/app_user-stat.js b/public/js/app_user-stat.js index e290b8d..01ea975 100644 --- a/public/js/app_user-stat.js +++ b/public/js/app_user-stat.js @@ -3,6 +3,24 @@ window.onload = async function () { let winnersCache = null; let completionsCache = null; + function setTableBodyLoading(tbodyId, colspan) { + const tbody = document.getElementById(tbodyId); + if (!tbody) return; + const span = Number.isFinite(Number(colspan)) ? Number(colspan) : 1; + tbody.innerHTML = ` + + +
+ + Chargement… +
+ + + `; + } + async function fetchActiveYear() { try { const res = await fetch('/api/settings/year', { method: 'GET' }); @@ -229,6 +247,16 @@ window.onload = async function () { } try { + // Show loading states immediately (avoid "blank" panels) + const table = document.querySelector('.user-table'); + const spinner = document.getElementById('loading-spinner'); + const statsError = document.getElementById('stats-error'); + if (spinner) spinner.classList.remove('d-none'); + if (table) table.classList.add('d-none'); + if (statsError) statsError.classList.add('d-none'); + setTableBodyLoading('winners-table-body', 2); + setTableBodyLoading('completers-table-body', 4); + const activeYear = await fetchActiveYear(); if (activeYear) { document.title = `Pool Oscars ${activeYear} - Statistiques des utilisateurs`; @@ -257,9 +285,6 @@ window.onload = async function () { const stats = await statsRes.json(); const userTableBody = document.getElementById('user-table-body'); - const table = document.querySelector('.user-table'); - const spinner = document.getElementById('loading-spinner'); - const statsError = document.getElementById('stats-error'); // Ensure watchedRatio is treated as a number and sort in descending order stats.sort((a, b) => parseFloat(b.watchedRatio) - parseFloat(a.watchedRatio)); diff --git a/public/user-stat.html b/public/user-stat.html index 0de9db8..3c135a7 100644 --- a/public/user-stat.html +++ b/public/user-stat.html @@ -91,8 +91,10 @@ -