Show all texts at once; hide them while the results are being fetched; show them after the results have been fetched

index.html

@@ -40,18 +40,20 @@
 				stroke-width: 1;
 			}
 			.languageText, .romanizationText {
-				visibility: hidden;
+	/*			visibility: hidden; */
 				font-family: "Noto Sans";
 				font-size:1.25em;
 				pointer-events: none;
 			}
 
+	/*		
 			.language:hover ~ .languageText {
 				visibility: visible;
 			}
 			.language:hover ~ .romanizationText {
 				visibility: visible;
 			}
+	 */
 
 			.testClass:hover {
 				fill: red;
@@ -100,7 +102,7 @@
 		<main>
 		<section id="textStuff">
 			<h1>Indian Translate</h1>
-			<form hx-get="/submit" hx-swap=none hx-indicator="#loading-screen" 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::before-request="hideText(event.detail.xhr.response)" 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"/>

updateTranslations.js

@@ -1,3 +1,7 @@
+function hideText(request) {
+		document.querySelectorAll(".languageText, .romanizationText").forEach(element => element.style.visibility = 'hidden')
+}
+
 function updateTranslations(response) {
 		const translations = JSON.parse(response);
 		document.querySelectorAll(".languageText").forEach(element => {
@@ -23,5 +27,7 @@ function updateTranslations(response) {
 					element.textContent = "(" + romanizations[element.id.replace("Romanization", "")] + ")";
 				}
 			});
+			// Show elements again
+			document.querySelectorAll(".languageText, .romanizationText").forEach(element => element.style.visibility = 'visible')
 		});
 }