Add loading indicators and error handling UI and retry option

static/css/style.css

@@ -2,4 +2,29 @@ body {
   background: black;
   color: white;
   text-align: center;
+  font-family: Arial, sans-serif;
+  margin-top: 100px;
+}
+
+button {
+  padding: 10px 20px;
+  font-size: 16px;
+  cursor: pointer;
+  border: none;
+  border-radius: 8px;
+  margin-top: 10px;
+}
+
+#loading {
+  margin-top: 20px;
+  color: yellow;
+}
+
+#error {
+  margin-top: 20px;
+  color: red;
+}
+
+.hidden {
+  display: none;
 }

static/js/script.js

@@ -1 +1,25 @@
-console.log("RustTune loaded");
+const playBtn = document.getElementById("playBtn");
+const loading = document.getElementById("loading");
+const errorBox = document.getElementById("error");
+const retryBtn = document.getElementById("retryBtn");
+
+function simulateRequest() {
+  loading.classList.remove("hidden");
+  errorBox.classList.add("hidden");
+
+  setTimeout(() => {
+    loading.classList.add("hidden");
+
+    const success = Math.random() > 0.5;
+
+    if (!success) {
+      errorBox.classList.remove("hidden");
+    } else {
+      alert("Music Played Successfully 🎵");
+    }
+  }, 2000);
+}
+
+playBtn.addEventListener("click", simulateRequest);
+
+retryBtn.addEventListener("click", simulateRequest);

templates/index.html

@@ -8,7 +8,16 @@
   <h1>🎧 RustTune</h1>
   <p>Music app using Rust</p>
 
-  <button>Play</button>
+  <button id="playBtn">Play</button>
+
+  <div id="loading" class="hidden">
+    Loading...
+  </div>
+
+  <div id="error" class="hidden">
+    <p>Something went wrong!</p>
+    <button id="retryBtn">Retry</button>
+  </div>
 
   <script src="/static/js/script.js"></script>
 </body>