feat: add lazy load to i18n #952
Conversation
✅ Deploy Preview for findadoc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
gminetoma
force-pushed
the
feat/lazy-load-localization
branch
2 times, most recently
from
ff3647f to
fe58df6
Compare
There was a problem hiding this comment.
nice work @gminetoma ! good find for lazy loading them and thinking of the loading state ✨
|
|
||
| // getLocaleCookie to set the initial locale, if there is no cookie, it will default based on the nuxt.config.js | ||
| // HACK: Browser's code language is using "-" instead of "_". | ||
| const localeCookie = getLocaleCookie() ? getLocaleCookie().replace('-', '_') : Locale.EnUs |
There was a problem hiding this comment.
if having the dash in there is hacky, could we just remove it? I don't think we technically need it, it was just there to try and match a standard. This would simplify the code and remove the hack 😸
There was a problem hiding this comment.
Sorry @ermish, we cannot remove it because our location is based on the backend's data type 'Locale'. The backend uses '_' while the browser and Nuxt use '-' for locale. We are saving the cookie in the browser's format and then parsing it to our format. We could fix this by changing the server's data type.
There was a problem hiding this comment.
Hmmm I think we should change the servers type but let's get democracy in here! @Anissa3005 @theyokohamalife @NabbeunNabi cast ye's opinion 🏴☠️
There was a problem hiding this comment.
I think changing the server's type would also be better as an overall choice. Makes sense to me to match the browser, since most modern browsers use IETF BCP 47 language tags.
There was a problem hiding this comment.
I'm in favor of changing it in the backend. @gminetoma it would be a good idea to include a link to the Nuxt docs in your PR description so reviewers can reference it easily.
We no longer need the file './i18n.options.ts' to configure i18n. The configuration is now handled directly in the Nuxt config file. We are loading the last language used via cookies; therefore, we need to disable the language selector and display a loading indicator for the user until the loading process is complete. The browser's language code uses "-", so we need to apply a small adjustment to align with our backend typing, which uses "_". Co-authored-by: Will <[email protected]>
gminetoma
force-pushed
the
feat/lazy-load-localization
branch
from
fe58df6 to
3b7c9f1
Compare
|
@gminetoma moving this to Draft for now until the backend is updated 👍 |
Resolves #889
🔧 What changed
We no longer need the file './i18n.options.ts' to configure i18n.
The configuration is now handled directly in the Nuxt config file.
We are loading the last language used via cookies; therefore, we need to disable the language selector and display a loading indicator for the user until the loading process is complete.
The browser's language code uses "-", so we need to apply a small adjustment to align with our backend typing, which uses "_".
📑 References
Nuxt i18n Lazy-load translations
Nuxt Vue I18n API
📸 Screenshots
Before
Recording.2024-12-24.211500.mp4
After
Recording.2024-12-24.210736.mp4