adding loading bar to match previews

Author: redbackspider77

app.js

@@ -233,6 +233,9 @@ async function loadMatches() {
   liveContainer.innerHTML = '';
   finishedContainer.innerHTML = '';
 
+  const total = gameEntries.length;
+  let loaded = 0;
+
   for (const game of Object.values(games)) {
     const { lichessGameId, white, black, status } = game;
     if (!lichessGameId) continue;
@@ -268,7 +271,12 @@ async function loadMatches() {
     } else {
       finishedContainer.appendChild(card);
     }
+
+    loaded++;
+    const percent = Math.round((loaded / total) * 100);
+    document.getElementById('games-loading-bar').style.width = `${percent}%`;
   }
+  document.getElementById('games-loading-bar-container').style.display = 'none';
 }
 
 function hideIframeLoader(iframe) {

index.html

@@ -52,11 +52,17 @@ <h3>Troll Reports</h3>
     </div>
 
     <h2>Live Games</h2>
+    <div id="games-loading-bar-container">
+      <div id="games-loading-bar"></div>
+    </div>    
     <div class="scroll-container">
       <div id="live-matches" class="matches-row"></div>
     </div>
 
     <h2>Finished Games</h2>
+    <div id="games-loading-bar-container">
+      <div id="games-loading-bar"></div>
+    </div>    
     <div class="scroll-container">
       <div id="finished-matches" class="matches-row"></div>
     </div>    

style.css

@@ -261,4 +261,19 @@ a:active {
     border-radius: 4px;
   }
 
-  
+#games-loading-bar-container {
+    height: 6px;
+    width: 100%;
+    background-color: #ddd;
+    margin: 1rem 0;
+    position: relative;
+    border-radius: 3px;
+    overflow: hidden;
+  }
+  
+#games-loading-bar {
+    height: 100%;
+    width: 0%;
+    background-color: #4CAF50;
+    transition: width 0.2s ease;
+  }