Translations flicker

[CommanderRedYT]

On browser page load (initial load before next-clientside-loading takes over or pressing F5), the translation-keys will appear for a short time until translation files are loaded.

I am using the basic public/locales/<lang>/foo.json structure and no NextJS routing (no /de-DE/bla)

[vladislavdev58]

Hello @CommanderRedYT. Were you able to fix the problem?

[CommanderRedYT]

Hello @CommanderRedYT. Were you able to fix the problem?

Nope, eventually swapped to next-i18next only

[vladislavdev58]

@CommanderRedYT
Pass the received language to fallbackLng
...(await loadTranslations({ ...ni18nConfig, fallbackLng: language }, language, ['translation']))

And use i18next-browser-languagedetector

[ayushxshukla]

@CommanderRedYT Pass the received language to fallbackLng ...(await loadTranslations({ ...ni18nConfig, fallbackLng: language }, language, ['translation']))

And use i18next-browser-languagedetector

@vladislavdev58 Could you explain, where do we need to make these changes exactly, and how they impact the flickering. Thank you so much for giving me hope that the flickering can be solved :)

[Pudge1996]

Same problems

[abdallhsamy]

a temporarily solution is to move content to a separated component

import HomepageComponent from "@/components/HomepageComponent";

export default function  Homepage() {
  return (
      <HomepageComponent />
  );
};