React i18next - Don't show translations until request finished

Question

I am getting language info from backend. I would like to make the request to get language info, and then signalize to i18next that it can show translations.
Currently, it shows the default language translations for a second, until the request finishes and I call i18next.changeLanguage().

How would I achieve this ?

This is my config:

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import XHR from "i18next-xhr-backend";

 i18n
  .use(initReactI18next)
  .use(XHR)
  .init({
    fallbackLng: "en-GB",
    keySeparator: false,
    interpolation: {
      escapeValue: false
    },
    backend: {
      loadPath: "/locales/{{lng}}.json"
    }
  });

I am using the useTranslation hook to get the t function:

 const { t } = useTranslation();

felixmosh felixmosh · Accepted Answer · 2020-03-31T15:04:30

In case of react-i18next make sure useSuspense is enabled or handle the ready state in HOCs or hooks yourself.

You need to wrap your root component with Suspense component to determine what should be rendered while translations are loading.

import React, { Suspense } from 'react';
import RealApp from './App';
import Loading from './Loading';
import { I18nextProvider } from 'react-i18next';
import App from './App';

function Root(props) {
  return (
    <Suspense fallback={<Loading />}>
      <I18nextProvider i18n={i18n}>
        <Root />
      </I18nextProvider>
    </Suspense>
  );
}

For more info.

React i18next - Don't show translations until request finished

1 Answers