Original content flashing to translated text not nice

[yumin-chen]

When the page first gets loaded, the original content is shown to the user very briefly (for maybe about 0.5 sec) and then the translation gets loaded and used to replace the original content. What the user sees is the original content quickly flashes to its corresponding translation. This effect is not very pleasant to look at.

At first I thought it was because I was using the backend plugin and thus the delay. But when I directly put all the translation in the init script, still the delay is quite noticeable. Seeing the old content flashing to the translation is really not nice. Is there any way to work around this issue?

[jamuhl]

It depends on your framework you use beside i18next to render your html!

eg:

react-i18next -> you can set wait: true on translate hoc options
i18nextify -> you can set display: none on the root to translate on translated the script will set it to block

i believe you're using jquery-i18next - so you could set the element you translate to display: none after call to selector.localize() just set it to block or inline (whatever is appropriate). Hope that helps.

[yumin-chen]

Thanks 👍