useSuspense false and use of loaders when not ready do not seem to work well

Hello all,

I am using react-i18next with useSuspense set to false. Then I grab the translations like this:

const {t, ready} = useTranslation("header-footer");
const translationsAvailable = ready;

Then in my render I have this:

if (translationsAvailable === false){
        return (
            <div className="text-center">
                <Loader height={30} weight={30} />
            </div>
        );
    }

However, when I enter the website or refresh, etc. For a fraction of a second I can see the translation keys(e.g. “header-home”, “header-about”, etc.) rather than my loader.

Based on the documentation I think I am doing everything needed. Is this a bug or is this expected?

Thank you in advance and kind regards.

• Device: 15" Laptop
• Browser: Firefox 69.0

[onestopjs]

@PsychedMagnet https://react.i18next.com/latest/usetranslation-hook#what-it-does does both

I didn’t even know it is possible, even looking at the source I still don’t understand how that is. Anyways, discard my comment in this case! 😄

Edit: now I see it, really clever trick

[jamuhl]

closing this for now…feel free to reopen with more insights