QuiiBz / next-international

Type-safe internationalization (i18n) for Next.js
https://next-international.vercel.app
MIT License
1.19k stars 52 forks source link

Display Loading Indicator During Language Translation Process #405

Open nguaman opened 1 month ago

nguaman commented 1 month ago

Is your feature request related to a problem? Please describe.

My file with the translations is a fairly large JSON, so the first time I switch languages it takes a few seconds to load. Therefore, I would like to display a message indicating that the text is being translated. I tried using useEffect based on the locale (useCurrentLocale), but it only detects when it starts fetching the translation and not when it finishes, so I have no way to remove the message indicating that the translation is in progress.

Describe the solution you'd like Expose some state of the translation process.

const [isTranslationInProgress, changeLocale] = useChangeLocale();

Describe alternatives you've considered Having some way to detect when the translation is finished or an alternative solution.

Additional context I tried using Suspense to detect when it loads but couldn't find a way to make it work.

gustaveWPM commented 1 month ago

I tried using useEffect based on the locale (useCurrentLocale), but it only detects when it starts fetching the translation and not when it finishes

Yes, the locale value will be updated only when the locale's file is imported, to avoid flickering. You can't rely on it. :/