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

Refactor: Simplify page loader UI and error handling

Browse Source 
Remove subtitle and retry button from page loader. Update CSS for new loader style.

Co-authored-by: mathieumoran1 <[email protected]>
This commit is contained in:
Cursor Agent
2025-12-21 21:54:59 +00:00
co-authored by mathieumoran1
parent d683f04305
commit 00f5328c75
3 changed files with 24 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/app.css
+6 -1
View File
@@ -88,6 +88,11 @@ footer {
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
} }
.page-loader-card.page-loader-card--baronly {
width: min(420px, 90vw);
padding: 14px;
}
.page-loader-title { .page-loader-title {
margin: 0 0 10px 0; margin: 0 0 10px 0;
font-weight: 700; font-weight: 700;
@@ -112,7 +117,7 @@ footer {
height: 100%; height: 100%;
width: 0%; width: 0%;
border-radius: 999px; border-radius: 999px;
background: linear-gradient(90deg, #ff4d4d 0%, #ffb200 50%, #4cd964 100%); background: #111;
transition: width 220ms ease; transition: width 220ms ease;
} }
public/js/app_checklist.js
+9 -19
View File
@@ -1,5 +1,6 @@
function createPageLoader(options = {}) { function createPageLoader(options = {}) {
const title = String(options.title || 'Chargement…'); const title = String(options.title || 'Chargement…');
// Subtitle kept for backwards-compat with callers, but we no longer render text in the UI.
const subtitle = String(options.subtitle || 'Préparation de la page…'); const subtitle = String(options.subtitle || 'Préparation de la page…');
let progress = 0; let progress = 0;
@@ -13,22 +14,15 @@ function createPageLoader(options = {}) {
overlay.setAttribute('aria-busy', 'true'); overlay.setAttribute('aria-busy', 'true');
overlay.innerHTML = ` overlay.innerHTML = `
<div class="page-loader-card"> <div class="page-loader-card page-loader-card--baronly">
<p class="page-loader-title">${title}</p> <span class="visually-hidden">${title}</span>
<p class="page-loader-subtitle" id="page-loader-subtitle">${subtitle}</p>
<div class="page-loader-progress" aria-hidden="true"> <div class="page-loader-progress" aria-hidden="true">
<div class="page-loader-bar" id="page-loader-bar"></div> <div class="page-loader-bar" id="page-loader-bar"></div>
</div> </div>
<div class="page-loader-actions d-none" id="page-loader-actions">
<button type="button" class="btn btn-sm btn-outline-dark" id="page-loader-retry">Réessayer</button>
</div>
</div> </div>
`; `;
const barEl = () => overlay.querySelector('#page-loader-bar'); const barEl = () => overlay.querySelector('#page-loader-bar');
const subtitleEl = () => overlay.querySelector('#page-loader-subtitle');
const actionsEl = () => overlay.querySelector('#page-loader-actions');
const retryBtnEl = () => overlay.querySelector('#page-loader-retry');
function clampPct(p) { function clampPct(p) {
const n = Number(p); const n = Number(p);
@@ -42,9 +36,8 @@ function createPageLoader(options = {}) {
if (bar) bar.style.width = `${progress}%`; if (bar) bar.style.width = `${progress}%`;
} }
function setSubtitle(text) { function setSubtitle(_) {
const el = subtitleEl(); // Intentionally no-op (we only show the bar now).
if (el) el.textContent = String(text || '');
} }
function getNavHeightPx() { function getNavHeightPx() {
@@ -100,13 +93,10 @@ function createPageLoader(options = {}) {
hideAndRemoveSoon(); hideAndRemoveSoon();
} }
function fail(message) { function fail(_) {
setSubtitle(message || 'Erreur lors du chargement.'); // Don't block the UI on errors: let the page render its own error message.
setProgress(Math.max(progress, 90)); setProgress(Math.max(progress, 95));
const actions = actionsEl(); window.setTimeout(() => hideAndRemoveSoon(), 200);
if (actions) actions.classList.remove('d-none');
const btn = retryBtnEl();
if (btn) btn.onclick = () => window.location.reload();
} }
ensureMounted(); ensureMounted();
public/js/app_movies.js
+9 -19
View File
@@ -1,5 +1,6 @@
function createPageLoader(options = {}) { function createPageLoader(options = {}) {
const title = String(options.title || 'Chargement…'); const title = String(options.title || 'Chargement…');
// Subtitle kept for backwards-compat with callers, but we no longer render text in the UI.
const subtitle = String(options.subtitle || 'Préparation de la page…'); const subtitle = String(options.subtitle || 'Préparation de la page…');
let progress = 0; let progress = 0;
@@ -13,22 +14,15 @@ function createPageLoader(options = {}) {
overlay.setAttribute('aria-busy', 'true'); overlay.setAttribute('aria-busy', 'true');
overlay.innerHTML = ` overlay.innerHTML = `
<div class="page-loader-card"> <div class="page-loader-card page-loader-card--baronly">
<p class="page-loader-title">${title}</p> <span class="visually-hidden">${title}</span>
<p class="page-loader-subtitle" id="page-loader-subtitle">${subtitle}</p>
<div class="page-loader-progress" aria-hidden="true"> <div class="page-loader-progress" aria-hidden="true">
<div class="page-loader-bar" id="page-loader-bar"></div> <div class="page-loader-bar" id="page-loader-bar"></div>
</div> </div>
<div class="page-loader-actions d-none" id="page-loader-actions">
<button type="button" class="btn btn-sm btn-outline-dark" id="page-loader-retry">Réessayer</button>
</div>
</div> </div>
`; `;
const barEl = () => overlay.querySelector('#page-loader-bar'); const barEl = () => overlay.querySelector('#page-loader-bar');
const subtitleEl = () => overlay.querySelector('#page-loader-subtitle');
const actionsEl = () => overlay.querySelector('#page-loader-actions');
const retryBtnEl = () => overlay.querySelector('#page-loader-retry');
function clampPct(p) { function clampPct(p) {
const n = Number(p); const n = Number(p);
@@ -42,9 +36,8 @@ function createPageLoader(options = {}) {
if (bar) bar.style.width = `${progress}%`; if (bar) bar.style.width = `${progress}%`;
} }
function setSubtitle(text) { function setSubtitle(_) {
const el = subtitleEl(); // Intentionally no-op (we only show the bar now).
if (el) el.textContent = String(text || '');
} }
function getNavHeightPx() { function getNavHeightPx() {
@@ -100,13 +93,10 @@ function createPageLoader(options = {}) {
hideAndRemoveSoon(); hideAndRemoveSoon();
} }
function fail(message) { function fail(_) {
setSubtitle(message || 'Erreur lors du chargement.'); // Don't block the UI on errors: let the page render its own error message.
setProgress(Math.max(progress, 90)); setProgress(Math.max(progress, 95));
const actions = actionsEl(); window.setTimeout(() => hideAndRemoveSoon(), 200);
if (actions) actions.classList.remove('d-none');
const btn = retryBtnEl();
if (btn) btn.onclick = () => window.location.reload();
} }
ensureMounted(); ensureMounted();