I have a website that has a translate button. When the user clicks it, I use document.getElementsByClassName.innerHTML to change the language of all the html text.

However, I want my loading animation to show after the user clicks translate, until all the text has been replaced, and the language-specific font has loaded in as well.

How could I wait until this happens before turning off my loading animation visibility? As far as I understand, the DOM has already loaded when the user clicks translate.

Edit: I should've added some code initially. Here is a small sample of what I'm doing:

index.html

<div>
    <h1 class="1.1.1">My website</h1>
    <h1 class="1.1.2">Text sample 1</h1>
</div>

translate.js

function setEnglish() {
    document.getElementsByClassName("1.1.1")[0].innerHTML = "My website";
    document.getElementsByClassName("1.1.2")[0].innerHTML = "Text sample 1";
}
function setFrench() {
    document.getElementsByClassName("1.1.1")[0].innerHTML = "Mon site-web";
    document.getElementsByClassName("1.1.2")[0].innerHTML = "Exemple de texte 1";
}

There is a button in index.html that when pressed, calls a language toggle function (I'm only switching between two languages). I use simple logic to switch between the languages in translate.js.

So unfortunately, I have to repeat the English (main language) translation in the translate.js even though it exists in the html, because I need to toggle back to English from French.

I also have a font for the English translation and a font for the French translation that is changed in translate.js:

if language is English:

var body = document.getElementsByTagName('body')[0];
body.style.fontFamily = "font1";

if language is French:

var body = document.getElementsByTagName('body')[0];
body.style.fontFamily = "font2";

The problem is that when the user clicks the button, the text loads, but the font change is delayed, so the user sees the font change.

Currently, I have a loading animation that triggers every time the user clicks the translate button, but its set to last for a hard delay of 500ms (regardless of how quickly the font loads). After the time is up, the loading gif is hidden.

I want to delay the hiding of this loading animation until the font and text are done switching from the previous language, instead of having a constant delay. Sometimes, the loading animation expires, then the font changes because it hasn't loaded fast enough. Hope this clears things up.