next-translate: Problem with Page Transitions

Hello,

First, thank you for this amazing library.

I’m experimenting this issue with any page transitions library eg. next-page-transitions framer-motion etc. Problem is that translation namespace is changed before animation finish:

<PageTransition timeout={1500} classNames='page-transition'>
  <Component {...pageProps} key={router.route} />
</PageTransition>

Note*: I set 1500 of delay to make more evident de issue, even without timeout effect is the same.

chrome-capture (1)

Is there a way to wait animation finish before load the namespace translation?

Thank you

About this issue

Original URL
State: open
Created 3 years ago
Comments: 22 (10 by maintainers)

Most upvoted comments

@josegutierro my bad! Just remembered the real fix that worked for me. I found this wrapper online that allows the translations to persist. You should just need to import this hook instead of next-translate, hope it helps.

import { useMemo } from "react";
import useNextTranslation from "next-translate/useTranslation";

/*
	This wrapper hook is so the translations persist through the page animations.
	Otherwise the route is considered different and next-translate will change the translation file before the animation has finished.
*/

export default function useTranslation(namespace, options) {
	const { t, lang } = useNextTranslation(namespace, options);
	const T = useMemo(() => t, [lang]);
	return { t: T, lang };
}

haydencleary on Feb 16, 2021

@josegutierro @haydencleary I did a PR to include this inside the useTranslation hook, this way you do not need a workaround.

aralroca on Apr 8, 2021

Hello @haydencleary

this works! Thank you so much, you made my day! 🎉

josegutierro on Feb 16, 2021

Also I noticed you import useMemo in src/I18nProvider.tsx but it isn’t used.

This was a mistake, this import can be removed!

aralroca on Apr 8, 2021

@josegutierro @haydencleary already pre-released on 1.0.6-canary.3 😊 If you can confirm that it works, that would be great

aralroca on Apr 8, 2021