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

Refactor loading indicators to use CSS dots

Browse Source 
This change replaces inline spinners with a more subtle CSS-based loading indicator. It also cleans up the inline loading text to be more concise.

Co-authored-by: mathieumoran1 <[email protected]>
This commit is contained in:
Cursor Agent
2025-12-21 21:44:49 +00:00
co-authored by mathieumoran1
parent 4809c8ad85
commit 377c5a828e
3 changed files with 45 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/app_checklist.js
+9 -19
View File
@@ -8,11 +8,9 @@ window.onload = async function () {
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 class="d-inline-flex align-items-center gap-2" role="status" aria-label="Chargement">
<span class="text-muted">Chargement</span>
<span class="loading-dots" aria-hidden="true"><span>.</span><span>.</span><span>.</span></span>
</div>
</td>
</tr>
@@ -20,15 +18,11 @@ window.onload = async function () {
}
function setInlineLoading(el, label = 'Chargement…') {
// Keep the header clean: no inline spinners, just text.
if (!el) return;
el.innerHTML = `
<span class="d-inline-flex align-items-center gap-2" aria-live="polite" aria-busy="true">
<span class="spinner-border spinner-border-sm text-secondary" role="status" aria-label="Chargement">
<span class="visually-hidden">Chargement...</span>
</span>
<span>${label}</span>
</span>
`;
el.textContent = label;
el.setAttribute('aria-live', 'polite');
el.setAttribute('aria-busy', 'true');
}
function showTableError(message) {
@@ -224,9 +218,7 @@ window.onload = async function () {
showTableLoading();
setInlineLoading(watchedRatioEl);
const progressBarEl = document.getElementById('progress-bar');
if (progressBarEl) {
progressBarEl.classList.add('progress-bar-striped', 'progress-bar-animated');
}
// Avoid extra "loading" animations; the table loader is enough.
let movies = [];
let watchedMovies = [];
@@ -270,9 +262,7 @@ window.onload = async function () {
const summary = await summaryPromise;
watchedMovies = Array.isArray(summary?.watchedMovies) ? summary.watchedMovies : [];
if (progressBarEl) {
progressBarEl.classList.remove('progress-bar-striped', 'progress-bar-animated');
}
if (progressBarEl) progressBarEl.removeAttribute('aria-busy');
} catch (e) {
showTableError('Impossible de charger la checklist. Réessaie dans quelques instants.');
return;
public/js/app_movies.js
+7 -12
View File
@@ -2,24 +2,19 @@ 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 class="loading-indicator" role="status" aria-live="polite" aria-busy="true" aria-label="Chargement">
<span class="text-muted">Chargement</span>
<span class="loading-dots" aria-hidden="true"><span>.</span><span>.</span><span>.</span></span>
</div>
`;
}
function setInlineLoading(el, label = 'Chargement…') {
// Keep the header clean: no inline spinners, just text.
if (!el) return;
el.innerHTML = `
<span class="d-inline-flex align-items-center gap-2" aria-live="polite" aria-busy="true">
<span class="spinner-border spinner-border-sm text-secondary" role="status" aria-label="Chargement">
<span class="visually-hidden">Chargement...</span>
</span>
<span>${label}</span>
</span>
`;
el.textContent = label;
el.setAttribute('aria-live', 'polite');
el.setAttribute('aria-busy', 'true');
}
function setLoadError(el, message) {