Reasonable way to avoid locale resetting on preload?

[henrikvilhelmberglund]

I have a few buttons for selecting the user language which change the $locale store to the locale string. I had an issue where $locale would get reset to whatever initLocale was in the +layout.js when hovering over links (preload) and when changing the route.

I fixed(?) it by using the following code:

const initLocale = get(locale) ? get(locale) : "en"; // get from cookie, user session, ...

await loadTranslations(initLocale, pathname); 

which seems to work as it uses the $locale store value if it exists, otherwise "en" as a default. (Should probably use cookies/localstorage for this later)

My main question is, is there a better way to do this? I'm very new to i18n.

[jarda-svoboda]

Hi @henrikvilhelmberglund!
Your solution is quite tricky as the locale store is shared between users on server. Recommended is to use cookies to keep user’s preferred language.. see example here.

[henrikvilhelmberglund]

Sorry for creating an issue instead of posting it as a discussion. 😊

I'm using the static adapter so I only really care about client behavior and it seems to work fine the way I set up. I used local storage instead of cookies for storing the preferred language though.

Saving the language as a cookie seems smart if you've got a real server so you can send the correct language pages with SSR instead of the language switching client side. I can see it flashing now in dev but it might be fast enough when built.

Could I solve it by still using the store but wrapping it in context? Like this https://kit.svelte.dev/docs/state-management#using-stores-with-context

I think I will look at the example and give it a go later! Does it still work with preloading on hover though? It seems like you removed the attribute in app.html.

[kinxiel]

I am encountering exactly the same issue. I am using the Single Load example as reference. In the project I am currently working on, during link hover (preload) the locale resets to the initial locale. What is the preferred way to handle this for a client only App?

• Is local storage acceptable? any other solutions?

@henrikvilhelmberglund just curious as to what solution you ended up using.

[henrikvilhelmberglund]

I haven't solved it for SSR because I only have a static site, but for client side I use a persisted store (localstorage) and use it with context in a layout load function like the link above. It works fine.

+layout.js
const initLocale = get(userPreferredLocale) ? get(userPreferredLocale) : "en";

stores.js
export const userPreferredLocale = persisted("preferredLocale", "en");

[kinxiel]

Thanks. I was thinking of going with a similar approach. Nice to know it works fine.