add spinner

public/user-stat.html

@@ -59,8 +59,14 @@
 
 <div class="container mt-5">
   <h2>Statistiques des utilisateurs</h2>
+  
+  <!-- Spinner shown while loading -->
+  <div id="loading-spinner" class="spinner-border text-primary" role="status">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  
   <!-- Table for users and movies watched -->
-  <table class="table user-table">
+  <table class="table user-table" style="display: none;">
     <thead>
       <tr>
         <th scope="col">Nom</th>
@@ -92,6 +98,7 @@
 </div>
 
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+
 <script>
   window.onload = async function () {
     const token = localStorage.getItem('auth_token');
@@ -125,7 +132,6 @@
     }
 
     try {
-      // Fetch user stats from the new endpoint
       const statsRes = await fetch('/api/users/stats', {
         method: 'GET',
         headers: {
@@ -139,11 +145,11 @@
 
       const stats = await statsRes.json();
       const userTableBody = document.getElementById('user-table-body');
+      const table = document.querySelector('.user-table');
+      const spinner = document.getElementById('loading-spinner');
 
-      // Populate table rows with user stats
       stats.forEach(userStat => {
         const userRow = document.createElement('tr');
-
         userRow.innerHTML = `
           <td>
             <a href="#" class="user-link" data-movies='${JSON.stringify(userStat.watchedMovies)}'>${userStat.name}</a>
@@ -151,10 +157,13 @@
           <td>${userStat.watchedCount}</td>
           <td>${userStat.watchedRatio}</td>
         `;
-
         userTableBody.appendChild(userRow);
       });
 
+      // Hide spinner and show table after loading
+      spinner.style.display = 'none';
+      table.style.display = 'table';
+
       // Add event listener for user links
       document.querySelectorAll('.user-link').forEach(link => {
         link.addEventListener('click', function (event) {
@@ -182,8 +191,6 @@
       });
     } catch (error) {
       console.error('Error loading user statistics:', error);
-      // localStorage.removeItem('auth_token');
-      // window.location.href = '/';
     }
 
     // Log-off functionality