diff --git a/index.html b/index.html
index fdca09c..2841a7e 100644
--- a/index.html
+++ b/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;
}
diff --git a/updateTranslations.js b/updateTranslations.js
index e9779ce..0ae63c7 100644
--- a/updateTranslations.js
+++ b/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);
+ });
}