I18next Suspense mode with TSR
I am in the process of migrating a project from React Router to TanStack Router and encountered an issue with i18next.
In React Router, unwraped suspense behaves more like a loader, meaning navigation does not proceed until all unresolved Suspense throws (e.g., useSuspenseQuery or translations using useTranslation() like t('key')) are resolved. This approach ensures that the UI waits for translations to load before rendering the next route.
With TanStack Router, however, the behavior differs fundamentally: navigation occurs immediately, displaying either a blank screen momentarily or the nearest pendingComponent, even when no loader is defined and the routes are not lazy. This reflects a difference in how the two routers handle promises with Suspense.
I understand this is not a bug but rather a design choice underlying TanStack Router's handling of navigation and loading states. However, it introduces challenges for my use case. Specifically, I now need to take additional steps: either loading the i18next namespace in the loader or defining pendingComponent elements, which are not ideal or necessary in my scenario.
What would be the recommended approach to address this? Is there an efficient way to manage translations and prevent navigation issues without requiring these additional adjustments?
1 Reply
eastern-cyan•9mo ago
this isn't really so much about i18n, right?
it just happens that i18next uses suspense here
hmm
can you provide a minimal example on Stackblitz by forking one of the existing examples?