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.

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

Thank you

[haydencleary]

@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 };
}

[aralroca]

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