Add loading state for /weather API call

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>

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";
+  }
+});

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);
-}
+}
+
+#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); }
+}