Why is Suspense used twice in the React example?

I’ve just took a look at this example:

https://github.com/i18next/react-i18next/blob/master/example/react/src/App.js

I’ve noticed that Suspense is used within the Page function and the App function uses Suspense as well.

I’m just wondering why the App function needs Suspense when the Page already has it?

I’ve currently set my project up just like your example using XHR to load my translation files. Any documentation around using i18next-xhr-backend and Suspense would be great.

Thanks, Nick

[jamuhl]

@rajathgunners idk…looks like you build something completely independent of react-i18next -> so the only one able to find out what is wrong - is you…

useTranslation, withTranslation all work completely fine with the Suspense API -> loadNamespace is just a function loading namespaces (there is no connection to react at all)

[rajathgunners]

I am fetching namespaces for my i18next from my backend server.

I have a page route to namespaces mapping json file: pageNameSpaceMapping = { ‘/page1’: [ns1, ns2] }

I am loading namespaces by listening to route changes using history.listen((pathname) => i18n.loadNamespaces(pageNameSpaceMapping[pathname]) ).

I also have a Suspense component wrapped at the top of my React app.

But when I navigate to /page2 route, the loadNamespaces get called and I fetch the namespaces, the react component already gets rendered and not the Suspense fallback Component.

My doubts are:

1. Doesn’t the Suspense component not work for loadNamespaces api ??
2. Is it because I am calling the loadNamespaces from the history.listen handler ??