Страница мерцает при ленивой загрузке переводов с помощью i18next-http-backend

Question

Я не уверен, действительно ли это проблема с плагином и моими конфигурациями, или это просто стандартное поведение.

Я использую response-i18next с i18next-http-backend для загрузки файлов перевода из общей папки. Ленивая загрузка - это приятный бонус, но на самом деле я использую внутренний плагин, потому что файлы управляются извне (не программистами), и я не могу заранее знать, какие файлы существуют. Я здесь не работаю на стороне сервера, поэтому я не могу напрямую читать из файловой системы.

Проблема: у меня есть сворачиваемый раздел, содержимое которого отображается только при расширении раздела. Когда для этого содержимого требуется файл перевода, который ранее не загружался, получение файла, похоже, вызывает перезагрузку страницы: она мерцает и прокручивается вверх.

Мне кажется странным, что страница мерцает из-за загрузки файла. Я предполагаю, что i18next обновляется, потому что он загружает новое пространство имен и это вызывает мерцание. Имеет ли это смысл? Если да, то есть ли способ сообщить http-backend все пространства имен (т.е. все имена файлов в /public/locales), сохраняя при этом ленивую загрузку? Мне что-то не хватает в моей конфигурации?

Вот моя конфигурация:

      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,
  });

Спасибо за любую помощь!

Answer 1

Проблема была вызвана <React.Suspense fallback={<div />}>это упаковывало приложение с полной реакцией. Когда новый перевод был введен во время выполнения, резервный div был визуализирован, что привело к «мерцанию». Я снял обертку и поставил react: { useSuspense: false } в конфигурации i18n и теперь все работает как положено.