Prevent `baseTranslation` from flashing

[vineryap]

I'm using SvelteKit, and so far it's working fine unless for 1 problem. When refreshing the page, it always flashes the baseTranslation before the current locale translation. The locale is persisted on the localStorage using persistentAtom. I also added await translationsLoading(i18n) but same result. And i18n.loading.get() always returning false

[ai]

There will be no way to do not have baseTranslation in some first ms on the app runtime (because of the async nature).

But I agree that it is a bug since, at least, we should have i18n.loading.get() in true.

Can I ask you to debug the source of the problem since you have a reproduction case?

[vineryap]

So I tested it again and I found that i18n.loading.get() and translationsLoading is working when I use it in the components where it is called the translation Message.

If I use i18n.loading.get() and translationsLoading in the <script context="module"> in __layout.svelte file, the i18n.loading.get() will always returning false.

// __layout.svelte

// something like this
<script context="module">
import { i18n } from '$lib/stores/i18n';
import { translationsLoading } from '@nanostores/i18n';

export const load = async () => {
  ...

  // i18n.loading.get() --> false
  if (i18n.loading.get()) {
    await translationsLoading(i18n))
  }

  ...
})
</script>

<main>
    <slot />
</main>

I'm guessing it is because the translation message is not used in the __layout.svelte file. And it makes sense to me and doesn't seem like a bug, but just to be sure, I prefer to have a confirmation. Is this the correct behavior?

In the component I can await the translation and put a fallback placeholder when fetching the translation, but is it possible to await all translations from the <script context="module"> inside the __layout.svelte or maybe from the hooks (server-side) before it gets to the client? Because it is very repetitive to do this on every component that needs translation.

[vineryap]

Something like this would be nice

[ai]

Can you try to make PR?

Sorry, I am busy on another open-source project now.

[vineryap]

Yup, sure, I'll try to make it, but I might need some guidance. Hopefully, I can solve it by myself though, I don't want to bother you too much.

Anyway, thanks for the great tools! Really appreciate it.

[ai]

Sure, feel free to ask questions. I will try to explain and guide you.

[nymless]

I've recreated this issue in React, so it's not SveltKit problem. I think the loading.set(true/false) calls logic is broken in create-i18n. Can't yet figure how to fix.

[nymless]

Can you try your app with adding this line?

// @nanostores/i18n/create-i18n/index.js -- Line 99

  async function getTranslation(code, components) {
    await new Promise((resolve) => setTimeout(() => resolve(), 0)); // This Line
    loading.set(true);

It worked for React, an async issue. Changing of loading store to true. but component who used it, hasn't passed its callback yet. So it didn't know of loading store change.

[vineryap]

Hi @nymless, it doesn't work with SvelteKit. I'm trying to make the loading state changes according to whether the translations for the locale are fetched/imported. But I still haven't found the way. Anyway, thanks for the help!