Skip to main content
Version: 4.x.x

Adding loading overlay

As Tolgee loads the localization files from REST API or from provided localization files, user could see untranslated texts with their wrappers such as {{helo_world}} which is not what you want. To avoid this behaviour we can add a loading overlay and remove it when translations load.

To do so add to your page some overlaying div like this:

<div id="loading" style="
            position: fixed;
            top:0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;">
    Loading...
</div>

In a real page you should probably put your styles in separate style file or at least into <style> tag. For the demonstration, we will stick with inline styles.

This div will cover all visible content so user won't see anything else. This code makes it disappear in the right time:

tg.run().then(() => {
    document.getElementById("loading").style.display = "none";
})

You should end up this document:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello world</title>
</head>
<body>
    <div id="loading" style="
        position: fixed;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: white;
        display: flex;
        align-items: center;
        justify-content: center;
    ">
    Loading...
    </div>
    <h1>{{hello_world}}</h1>
</body>
<script src="https://unpkg.com/@tolgee/core"></script>
<script src="https://unpkg.com/@tolgee/ui"></script>
<script>
const { Tolgee, IcuFormatter } = window["@tolgee/core"]
const tg = Tolgee.use(IcuFormatter).init({
    apiUrl: "https://app.tolgee.io",
    apiKey: "you_secret_api_key",
    inputPrefix: "{{",
    inputSuffix: "}}",
    watch: true,
    ui: window["@tolgee/ui"].UI,
});
tg.run().then(() => {
    document.getElementById("loading").style.display = "none";
})
</script>
</html>