Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Switching locale using page transitions fetches with the old locale #3046

Open
T-Mike opened this issue Jul 29, 2024 · 0 comments
Open

Switching locale using page transitions fetches with the old locale #3046

T-Mike opened this issue Jul 29, 2024 · 0 comments

Comments

@T-Mike
Copy link

T-Mike commented Jul 29, 2024

Environment

i18n v8

Reproduction

This is the reproduction with the fix/hack:
https://stackblitz.com/edit/nuxt-starter-pekxmy

I forked from #1939 reproduction link, updated nuxt and i18n, removed unnecessary parts and used the latest implementation of transitions and it seems to be solved.
I decided to keep it in the repro (so sorry this is not minimal), you can switch in the top nav between '/' (using useState from #1939) and '/fetch' with my workaround)

Describe the bug

When using transitions, locale change is delayed after the page fades out.
Without this, the content would change right away which defeats the purpose of the transition.
But, when loading the new page, locale is still set to the old locale and fetches content with the old locale... misère !

To sum up the steps involved :

  1. user clicks on link to switch to a new page with another locale
  2. navigation starts, page fades out, new page is being loaded, locale is still set to old locale
  3. page has faded, locale is set to new locale
  4. new page fades in

from @rchl comment in 1255

Hmm... we want the locale to change only after the new route has loaded but also we want the locale property to be updated before the new route starts loading... Those are conflicting expectations.
I'm not sure if there is a clean solution for that.

While writing a reproduction I tried adding a new variable immediateLocale (I'm sure there is a better name) that is being set on step 1 (i.e. before navigating to new page).
Fetching the content using this variable works as intended.

You will see in the repro link, in app.vue, I declared immediateLocale with useState, watched for locale changes, and set it right before nuxtlink navigation.
And then I use immediateLocale to fetch content in other pages.

We now have a workaround, but it would be nice if it could be implemented in the module and exposed like :
const { immediateLocale } = useI18n()

Additional context

No response

Logs

No response

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant