From da3b3b8a16736086eb54000dc48866a8294ff108 Mon Sep 17 00:00:00 2001
From: Aadhavan Srinivasan <aadhavan@twomorecents.org>
Date: Sun, 2 Mar 2025 22:02:23 -0500
Subject: [PATCH] Added loading indicator when translations are being retrieved

---
 index.html | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)
diff --git a/index.html b/index.html
index 1183acc..fdca09c 100644
--- a/index.html
+++ b/index.html
@@ -66,24 +66,35 @@
 /*			.district:hover ~ .districtText {
 				visibility: visible;
 			}*/
+
+
+			.loading-indicator {
+					display: none;
+			}
+			.htmx-request.loading-indicator /* While request is being made */ {
+					display: inline;
+			}
 		</style>
 	</head>
 	<body>
 		<main>
 		<section id="textStuff">
 			<h1>Indian Translate</h1>
-			<form hx-get="/submit" hx-on::after-request="updateTranslations(event.detail.xhr.response)" class="translateForm" method="get">
+			<form hx-get="/submit" hx-swap=none hx-indicator="#loading-screen" hx-on::after-request="updateTranslations(event.detail.xhr.response)" class="translateForm" method="get">
 				<label for="query">Enter text to translate:</label>
 				<input type="text" name="query" id="query" required/>
 				<input type="submit" value="Translate"/>
 			</form>
+		<progress id="loading-screen" class="loading-indicator"></progress>
 		</section>
 
 		<svg id = "indiaMap" width="1000" height="1000"></svg>
 		</main>
 
-		<script src="index.js"></script>
-		<script src="updateTranslations.js"></script>
+		<script type="text/javascript" src="index.js"></script>
+		<script type="text/javascript" src="updateTranslations.js"></script>
+
+
 	</body>
 </html>
 
