Keys are displayed before the translations

[zipel]

🐛 Bug Report

I am experiencing a weird behavior using i18nextify. I managed to set it up using external JSON files for the keys-translations and I am initializing it using the init function (I am calling the script in the head section of my index.html file).

The thing is, I am sometimes able to see the keys instead of the translation's text displayed on buttons, placeholders etc for a split second and then they get the correct content. It happens pretty inconsistently (maybe once out of five refreshes of the page) and not in the entire page, just in some dynamically created parts like the results that are loaded after a search and take some time to appear on the screen. It seems like the HTML elements are loaded before the framework manages to grab the translations and update the content.

Even more inconsistently, sometimes the translations are not loaded at all and I just see the keys on the whole page (like the JSON file is never loaded) and the only thing that triggers the correct content to appear is forceRerender().

To Reproduce

My JS code is the following:

i18nextify.i18next.init({
    debug: true,
    namespace: 'translation',
    translateAttributes: ['placeholder', 
        'title', 
        'alt', 
        'value#input.type=button', 
        'value#input.type=submit', 
        'name', 
        'aria', 
        'aria-labelledby', 
        'href'],
    lng: 'eh',
    fallbackLng: 'eh',
    useSuspense: true,
    interpolation: {
        escapeValue: false,
        skipOnVariables: true
    }
});

I am using RactiveJS in the page so some of the elements are dynamically created and I thought that useSuspense: true was going to be enough for the framework to wait until all the elements are loaded. I am also using style="display: none" on the body to avoid the flickering but it doesn't solve this issue.

Expected behavior

I was expecting to see only the actual translations text and not the key (not even for a split second) so basically I was expecting the observer/listener that i18nextify is using, to wait until the elements are fully loaded (even the ones that load after pageload) and display only the translations and not the keys.

[adrai]

useSuspense is an option for react-i18next...

seems UI is rendered before i18next has finished to initialize or finished to load the translations...

Can you please provide an example? codesandbox or repo on github?

[zipel]

Unfortunately, I am working on proprietary code so I can't share enough... Most of the page's content is coming from the backend, from API calls to a different platform, this is why some content is rendered later.

I thought I was missing something trivial, like an option I didn't set or that I should call the nextify's scripts in a specific order in the head section of my HTML or even wrap some code in a promise.

[adrai]

Sorry, can't help like this 🤷‍♂️

[zipel]

I will check how much I can share and update this issue later. Thank you!

[jamuhl]

are you using different namespaces for components loaded via reactiveJS? i18nextify does not have a mechanism to load namespaces on demand -> you will either have to preload them by having them in the ns array of init options or handle loading additional namespaces yourself

[zipel]

I am only using one namespace at the moment, nothing complex, my JSON file (locales/en/translation.json) looks like this: { "key1": "text1", "key2": "text2", "key3": "text3" }

[jamuhl]

strange...no idea how to help without reproducible sample