quoije/oscars-pool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #34 from quoije/cursor/loading-spinner-implementation-907f

Browse Source 
Loading spinner implementation
This commit was merged in pull request #34.
This commit is contained in:
Mathieu Moran
2025-12-21 16:30:54 -05:00
committed by GitHub
parent aeff3504f0 762f75ad62
commit b764d26ad0
4 changed files with 216 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/app_checklist.js
+45 -5
View File
@@ -1,5 +1,35 @@
window.onload = async function () {
const token = localStorage.getItem('auth_token');
const movieTableBody = document.getElementById('movie-table-body');
function showTableLoading() {
if (!movieTableBody) return;
movieTableBody.innerHTML = `
<tr>
<td colspan="3" class="text-center py-4" aria-live="polite" aria-busy="true">
<div class="d-inline-flex align-items-center gap-2">
<div class="spinner-border text-secondary" role="status" aria-label="Chargement">
<span class="visually-hidden">Chargement...</span>
</div>
<span>Chargement…</span>
</div>
</td>
</tr>
`;
}
function showTableError(message) {
if (!movieTableBody) return;
movieTableBody.innerHTML = `
<tr>
<td colspan="3">
<div class="alert alert-danger my-2" role="alert">
${message || 'Erreur lors du chargement.'}
</div>
</td>
</tr>
`;
}
const DEFAULT_COMPLETION_MODAL = Object.freeze({
title: 'Félicitations! very nice 🎉🎉🎉',
@@ -155,6 +185,13 @@ window.onload = async function () {
window.location.href = '/';
}
showTableLoading();
let movies = [];
let watchedMovies = [];
let watchedMoviesInYear = [];
let movieImdbIds = new Set();
try {
// Fetch remaining data in parallel (Render latency is high).
const [completionModalContent, moviesRes, watchedRes] = await Promise.all([
fetchCompletionModalContent(),
@@ -176,18 +213,21 @@ window.onload = async function () {
return;
}
const movies = await moviesRes.json();
movies = await moviesRes.json();
// Sort movies alphabetically by title
movies.sort((a, b) => a.title.localeCompare(b.title, 'fr', { sensitivity: 'base' }));
let watchedMovies = [];
if (watchedRes.ok) {
watchedMovies = await watchedRes.json();
}
} catch (e) {
showTableError('Impossible de charger la checklist. Réessaie dans quelques instants.');
return;
}
const movieImdbIds = new Set(movies.map((m) => m.imdb_id).filter(Boolean));
let watchedMoviesInYear = watchedMovies.filter((wm) => movieImdbIds.has(wm.imdb_id));
movieImdbIds = new Set(movies.map((m) => m.imdb_id).filter(Boolean));
watchedMoviesInYear = watchedMovies.filter((wm) => movieImdbIds.has(wm.imdb_id));
const totalMoviesCount = movies.length;
const watchedMoviesCount = watchedMoviesInYear.length;
@@ -248,7 +288,7 @@ window.onload = async function () {
updateProgressBar(watchedMoviesCount, totalMoviesCount);
const movieTableBody = document.getElementById('movie-table-body');
if (movieTableBody) movieTableBody.innerHTML = '';
movies.forEach(movie => {
const watchedMovie = watchedMoviesInYear.find(wm => wm.imdb_id === movie.imdb_id);
const watchedDate = watchedMovie ? new Date(watchedMovie.watchedDate).toLocaleString() : '';
public/js/app_movies.js
+29 -1
View File
@@ -1,4 +1,24 @@
window.onload = async function () {
function setLoading(el) {
if (!el) return;
el.innerHTML = `
<div class="d-flex justify-content-center align-items-center my-5" aria-live="polite" aria-busy="true">
<div class="spinner-border text-secondary" role="status" aria-label="Chargement">
<span class="visually-hidden">Chargement...</span>
</div>
</div>
`;
}
function setLoadError(el, message) {
if (!el) return;
el.innerHTML = `
<div class="alert alert-danger my-3" role="alert">
${message || 'Erreur lors du chargement.'}
</div>
`;
}
async function fetchActiveYear() {
try {
const res = await fetch('/api/settings/year', { method: 'GET' });
@@ -105,9 +125,13 @@ window.onload = async function () {
window.location.href = '/';
}
const moviesList = document.getElementById('movies-list');
setLoading(moviesList);
// Populate "Dernière mise à jour des films" banner (per active year)
await fetchMoviesLastUpdated(activeYear, token);
try {
// Fetch movies + watched list in parallel (Render latency is high).
const [res, watchedRes] = await Promise.all([
fetch(`/api/movies?year=${encodeURIComponent(String(activeYear))}`, {
@@ -136,7 +160,6 @@ window.onload = async function () {
watchedMovies = await watchedRes.json();
}
const moviesList = document.getElementById('movies-list');
const movieImdbIds = new Set(movies.map((m) => m.imdb_id).filter(Boolean));
const watchedMoviesInYear = watchedMovies.filter((wm) => movieImdbIds.has(wm.imdb_id));
@@ -146,6 +169,8 @@ window.onload = async function () {
const ratioText = `Vu: ${watchedMoviesCount} / ${totalMoviesCount} (${ratioPct}%)`;
document.getElementById('watched-ratio').innerText = ratioText;
if (moviesList) moviesList.innerHTML = '';
movies.forEach(movie => {
const isChecked = watchedMoviesInYear.some(watchedMovie => watchedMovie.imdb_id === movie.imdb_id);
const watchedMovie = watchedMoviesInYear.find(wm => wm.imdb_id === movie.imdb_id);
@@ -181,6 +206,9 @@ window.onload = async function () {
</div>`;
moviesList.appendChild(movieDiv);
});
} catch (e) {
setLoadError(moviesList, 'Impossible de charger la liste des films. Réessaie dans quelques instants.');
}
document.getElementById('log-off').addEventListener('click', function () {
localStorage.removeItem('auth_token');
public/js/app_user-stat.js
+28 -3
View File
@@ -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 = `
<tr>
<td colspan="${span}" class="text-center py-4" aria-live="polite" aria-busy="true">
<div class="d-inline-flex align-items-center gap-2">
<div class="spinner-border text-secondary" role="status" aria-label="Chargement">
<span class="visually-hidden">Chargement...</span>
</div>
<span class="text-muted">Chargement…</span>
</div>
</td>
</tr>
`;
}
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));
public/user-stat.html
+20 -4
View File
@@ -91,8 +91,10 @@
<div id="stats-error" class="alert alert-danger d-none" role="alert"></div>
<!-- Spinner shown while loading -->
<div id="loading-spinner" class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
<div id="loading-spinner" class="d-flex justify-content-center align-items-center my-5" aria-live="polite" aria-busy="true">
<div class="spinner-border text-secondary" role="status" aria-label="Chargement">
<span class="visually-hidden">Chargement...</span>
</div>
</div>
<!-- Table for users and movies watched -->
@@ -123,7 +125,14 @@
</thead>
<tbody id="winners-table-body">
<tr>
<td colspan="2" class="text-muted">Chargement…</td>
<td colspan="2" class="text-center py-4" aria-live="polite" aria-busy="true">
<div class="d-inline-flex align-items-center gap-2">
<div class="spinner-border text-secondary" role="status" aria-label="Chargement">
<span class="visually-hidden">Chargement...</span>
</div>
<span class="text-muted">Chargement…</span>
</div>
</td>
</tr>
</tbody>
</table>
@@ -146,7 +155,14 @@
</thead>
<tbody id="completers-table-body">
<tr>
<td colspan="4" class="text-muted">Chargement…</td>
<td colspan="4" class="text-center py-4" aria-live="polite" aria-busy="true">
<div class="d-inline-flex align-items-center gap-2">
<div class="spinner-border text-secondary" role="status" aria-label="Chargement">
<span class="visually-hidden">Chargement...</span>
</div>
<span class="text-muted">Chargement…</span>
</div>
</td>
</tr>
</tbody>
</table>