adding loading animations

Author: redbackspider77

app.js

@@ -267,6 +267,13 @@ async function loadMatches() {
     }
   }
 }
+
+function hideIframeLoader(iframe) {
+  const wrapper = iframe.parentElement;
+  wrapper.querySelector('.iframe-loader').style.display = 'none';
+  iframe.style.visibility = 'visible';
+}
+
 /*
 // Reload matches every 30 seconds
 setInterval(() => {

index.html

@@ -25,7 +25,10 @@ <h1>Welcome to the Year 8 Chess Tournament</h1>
     <div id="game-panel" style="display:none; text-align: center;">
       <h2>Your Current Game</h2>
       <a id="game-link" href="#" target="_blank">Join Game</a><br><br>
-      <iframe id="userGame" src="" allowfullscreen></iframe>
+      <div class="iframe-wrapper">
+        <div class="iframe-loader"></div>
+        <iframe id="userGame" src="" width="240" height="240" onload="hideIframeLoader(this)"></iframe>
+      </div>      
       <br>
       <button onclick="reportTroll()">Report Opponent</button>
     </div>  

style.css

@@ -90,6 +90,38 @@ iframe#userGame {
     margin: 1rem auto;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   }  
+
+.iframe-wrapper {
+    position: relative;
+    width: 240px;
+    height: 240px;
+  }
+  
+.iframe-loader {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 40px;
+    height: 40px;
+    margin: -20px 0 0 -20px;
+    border: 4px solid #ccc;
+    border-top: 4px solid #4CAF50;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    z-index: 2;
+  }
+  
+  .iframe-wrapper iframe {
+    position: relative;
+    z-index: 1;
+    visibility: hidden;
+  }
+  
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }  
 
 #leaderboard {
     margin: 2rem auto;