From 282bd95ff65424cb9fe520a78013337be722edac Mon Sep 17 00:00:00 2001
From: Muskankr <mkr803967@gmail.com>
Date: Sat, 11 Jul 2026 22:46:00 +0530
Subject: [PATCH] Add loading state for /weather API call

---
 Frontend/index.html |  4 ++++
 Frontend/script.js  | 28 ++++++++++++++++++++++++++++
 Frontend/style.css  | 24 +++++++++++++++++++++++-
 3 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/Frontend/index.html b/Frontend/index.html
index 01f3eb9..c868dec 100644
--- a/Frontend/index.html
+++ b/Frontend/index.html
@@ -460,6 +460,10 @@ <h3>Environmental Intelligence</h3>
     </div>
     <button id="scrollTopBtn" class="scroll-top-btn" title="Back to Top">↑</button>
 
+<div id="loading" style="display: none;">
+  <p>Analyzing weather data...</p>
+</div>
+
     <script src="script.js"></script>
     <script src="chatbot.js"></script>
 </body>
diff --git a/Frontend/script.js b/Frontend/script.js
index 1c044ca..37f7fb4 100644
--- a/Frontend/script.js
+++ b/Frontend/script.js
@@ -263,3 +263,31 @@ if (scrollTopBtn) {
     });
   });
 }
+
+
+const form = document.getElementById("weatherForm"); // adjust ID if different
+const loadingEl = document.getElementById("loading");
+
+form.addEventListener("submit", async (e) => {
+  e.preventDefault();
+
+  // Show loading state
+  loadingEl.style.display = "block";
+
+  const city = document.getElementById("city").value; // adjust IDs
+  const state = document.getElementById("state").value;
+  const country = document.getElementById("country").value;
+
+  try {
+    const response = await fetch(`/weather?city=${city}&state=${state}&country=${country}`);
+    const data = await response.json();
+
+    // TODO: update UI with weather data
+    console.log(data);
+  } catch (error) {
+    console.error("Error fetching weather:", error);
+  } finally {
+    // Hide loading state
+    loadingEl.style.display = "none";
+  }
+});
diff --git a/Frontend/style.css b/Frontend/style.css
index ddf221e..3005275 100644
--- a/Frontend/style.css
+++ b/Frontend/style.css
@@ -1324,4 +1324,26 @@ body.light-mode .navbar {
 .scroll-top-btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 20px rgba(14, 165, 233, 0.45);
-}
\ No newline at end of file
+}
+
+#loading {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: bold;
+  color: #0077cc;
+}
+
+#loading::before {
+  content: "";
+  width: 16px;
+  height: 16px;
+  border: 2px solid #0077cc;
+  border-top: 2px solid transparent;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}