How to preload i18n in advance before page load in react?

Question

I am having an issue with preloading I18n in advance, so that the user is not able to see the intermediate state of the application (i.e how actually the language change is happening). The problem is that I need to change the page language after some requests (fetching user data, where is mentioned, user language). I know the possible ways of solving it, with lazy loading, but it's the first time I use it, so would be great to hear some best practices.

Versions are

"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-i18next": "^11.2.7",

This the routing structure

<Switch>
        <Route exact path={SIGNUP_PAGE} component={Signup} />
        <Route exact path={LOGIN_PAGE} component={Login} />
        <Route exact path={PASSWORD_RECOVERY} component={Recovery} />
        <Route exact path={`${NEW_PASSWORD}/:uuid?`} component={NewPassword} />
        <Route exact path={`${EMAIL_VERIFICATION}/:uuid?`} component={EmailVerification} />
        <Route exact path={SIGNUP_SUCCEED} component={SignupSucceed} />
        <MainLayout>
            <ProtectedRoutes>
                <Switch>
                    {getRoutes(routes, 'component')}
                </Switch>
            </ProtectedRoutes>
        </MainLayout>
        <Route render={() => <h1>Page not Found !!!</h1>} />
</Switch>

Here is my MainLayout component which inside has all routes

const MainLayout = (props) => {
    const {i18n} = useTranslation();
    const dispatch = useDispatch();
    const history = useHistory();
    const location = useLocation();

    const user = useSelector(state => state.user.userData, shallowEqual);
    const currentLanguage = last(user?.user_language?.split('/'))?.replace(/[A-Z]|\W+/g, '');
    const token = StorageManager.get('token');
    const lang = StorageManager.get('lang');
    // console.log(currentLanguage, lang, 'currentLanguage laaang');

    if (currentLanguage && currentLanguage !== lang) {
        StorageManager.set('lang', currentLanguage);
        i18n.changeLanguage(lang || currentLanguage);
    }

    useEffect(() => {
        if (!user.uuid && token) dispatch(getUserRequest());
    }, [dispatch, token, user.uuid]);

    if (!token && location.pathname !== LOGIN_PAGE) {
        history.push(LOGIN_PAGE);
        return null;
    }

    return (
        <div className='main-wrapper'>
            <NavBar />
            {(currentLanguage || lang) && <div >
                <Switch>
                    {getRoutes(routes, 'header')}
                </Switch>
                {props.children}
            </div>}
        </div>
    );
};

export default MainLayout;

Answer 1

You should add preload event to your link on mouseEnter event

i18next.loadNamespaces('anotherNamespace', (err, t) => { /* ... */ });

Source