Flashing translation keys when navigating pages

[v-mec]

Hi there 👋

I have an app with multiple pages where each has a separate i18n namespace. When navigating between them however, a translation key briefly shows up before the translation loads.

Screen.Recording.2024-04-19.at.10.39.50.mov

Any ideas what might be causing this? The setup is basically identical to what is described in the readme (including a handle on every page). The issue is also not present on initial load or refresh.

2 things helped:

• Removing react: { useSuspense: false } from the config. This started causing hydration errors.
• Including all namespaces in root handle - probably a better solution but loading all namespaces seeems unnecessary.

[jrestall-finact]

If you set react: { useSuspense: false } then react-i18next won't use suspense when loading the translations which means react-router/remix won't suspend the page transition until the translations have loaded, which causes the flash of untranslated keys. I'd suggest ensuring useSuspense is true and fixing the hydration issues.