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

Refactor page loader to use a dedicated JS class

Browse Source 
Co-authored-by: mathieumoran1 <[email protected]>
This commit is contained in:
Cursor Agent
2025-12-21 22:04:58 +00:00
co-authored by mathieumoran1
parent 6d7269f331
commit 1bc65ebd77
4 changed files with 169 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/user-stat.html
+14 -24
View File
@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pool Oscars - Statistiques des utilisateurs</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="./css/app.css" rel="stylesheet">
<style>
.navbar-custom {
background-color: black;
@@ -36,7 +37,17 @@
}
</style>
</head>
<body class="bg-light">
<body class="bg-light page-loading">
<!-- Preloaded loader overlay to avoid initial "clear" flash -->
<div id="page-loader-overlay" class="page-loader-overlay" data-preloaded="true" role="status" aria-live="polite" aria-busy="true">
<div class="page-loader-card page-loader-card--baronly">
<span class="visually-hidden">Chargement…</span>
<div class="page-loader-progress" aria-hidden="true">
<div class="page-loader-bar" id="page-loader-bar" style="width: 8%;"></div>
</div>
</div>
</div>
<!-- Black banner with buttons and user info -->
<nav class="navbar navbar-expand-lg navbar-custom">
@@ -90,13 +101,6 @@
<div class="tab-pane fade show active" id="pane-ranking" role="tabpanel" aria-labelledby="tab-ranking" tabindex="0">
<div id="stats-error" class="alert alert-danger d-none" role="alert"></div>
<!-- Spinner shown while loading -->
<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 -->
<table class="table table-striped table-hover align-middle user-table d-none">
<thead>
@@ -125,14 +129,7 @@
</thead>
<tbody id="winners-table-body">
<tr>
<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>
<td colspan="2" class="text-center py-4 text-muted" aria-live="polite" aria-busy="true">Chargement…</td>
</tr>
</tbody>
</table>
@@ -155,14 +152,7 @@
</thead>
<tbody id="completers-table-body">
<tr>
<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>
<td colspan="4" class="text-center py-4 text-muted" aria-live="polite" aria-busy="true">Chargement…</td>
</tr>
</tbody>
</table>