Page flickers when lazy-loading translations with i18next-http-backend

Question

I'm not sure if this is actually an issue with the plugin and my configurations, or if it is just standard behaviour.

I'm using react-i18next with i18next-http-backend to load translation files from the public folder. The lazy-loading is a nice bonus but I'm actually using the backend plugin because the files are managed externally (by non-programmers) and I can't know upfront which files exist. I'm not working server-side here so I can't read from the file system directly.

Problem: I have a collapsible section whose content is only rendered on expanding the section. When that content requires a translation file that was not previously loaded, the fetching of the file seems to trigger a page reload: it flickers and scrolls up.

It seems strange to me that the page is flickering because of fetching a file. I suppose that i18next is updating because it's loading a new namespace and that causes the flickering. Does that make sense? If so, is there a way to tell the http-backend all the namespaces (i.e, all the filenames in /public/locales), still keeping the lazy-loading? Am I missing something in my configuration?

Here's my configuration:

import en from './en/translation.json';
import de from './de/translation.json';

const localResources = { ...de, ...en };

const customLocalBackend = {
  type: 'backend',
  init: function (services, backendOptions, i18nextOptions) {
    /* use services and options */
  },
  read: function (language, namespace, callback) {
    callback(null, localResources[language][namespace]);
  },
};

export const i18n = i18next
  .use(initReactI18next)
  .use(ChainedBackend)
  .use(LanguageDetector)
  .init({
    lng: 'de',
    fallbackLng: 'de',
    supportedLngs: ['de','en'],
    load: 'languageOnly',
    debug: true,
    backend: {
      backends: [
        HttpBackend,        // load resources from /public folder
        customLocalBackend, // load local resources
      ],
      backendOptions: [
        {
          loadPath: '/locales/{{lng}}/{{ns}}.json',
        },
        {},
      ],
    },
    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    },
    keySeparator: false,
  });

Thanks for any help!

score 1 · Accepted Answer · answered Aug 13 '21 at 07:15

The problem was caused by a <React.Suspense fallback={<div />}> that was wrapping the full react app. When a new translation was injected at run time, the fallback div was rendered, causing the "flickering". I removed the wrapper and set react: { useSuspense: false } in the i18n configuration and everything is working as expected now.

Page flickers when lazy-loading translations with i18next-http-backend

1 Answers1