Added JS to fetch romanization from an endpoint and log it; added a CSS class to the loading bar to show while the data is being fetched

index.html

@@ -71,7 +71,7 @@
 			.loading-indicator {
 					display: none;
 			}
-			.htmx-request.loading-indicator /* While request is being made */ {
+			.loading, .htmx-request.loading-indicator /* While request is being made */ {
 					display: inline;
 			}
 		</style>

updateTranslations.js

@@ -3,4 +3,19 @@ function updateTranslations(response) {
 		document.querySelectorAll(".languageText").forEach(element => {
 			element.textContent = translations[element.id.replace("Text", "")];
 		});
+
+		// Send result to romanization sever
+		// Since this is an asynchronous opreation, there is no indication that
+		// it's being performed in the backend. So I add the 'loading' class to the progress
+		// bar used to track translations, and then remove it in the 'resolved' handler.
+		const elem = document.getElementById("loading-screen")
+		elem.classList.toggle("loading")
+		fetch("/romanize", {
+				method: "POST",
+				body: response
+		}).then((newResponse) => newResponse.json()) // It looks like response.json() returns another promise, since the _body_ of the response may not have loaded yet. Do not confuse this json() with the static Response.json() method. Since it returns another promise, I have to call .then() to actually get the result.
+		.then((data) => {
+			elem.classList.toggle("loading");
+			console.log(data);
+		});
 }