From a2237a63816476d5fc700cdd1cd39d2815d2c673 Mon Sep 17 00:00:00 2001
From: bharath <imposterbharathkumarburugu15@gmail.com>
Date: Sat, 16 May 2026 23:32:36 +0530
Subject: [PATCH] Add loading indicators and error handling UI

---
 static/css/style.css | 25 +++++++++++++++++++++++++
 static/js/script.js  | 26 +++++++++++++++++++++++++-
 templates/index.html | 11 ++++++++++-
 3 files changed, 60 insertions(+), 2 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index aa9bddf..f484b9a 100644
--- a/static/css/style.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/static/js/script.js b/static/js/script.js
index 41ff1e9..d7382de 100644
--- a/static/js/script.js
+++ b/static/js/script.js
@@ -1 +1,25 @@
-console.log("RustTune loaded");
\ No newline at end of file
+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);
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 3e1fd60..7beb090 100644
--- a/templates/index.html
+++ b/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>