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"/>