Comments (9)
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?
from i18n.
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.
from i18n.
Something like this would be nice
from i18n.
Can you try to make PR?
Sorry, I am busy on another open-source project now.
from i18n.
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.
from i18n.
Sure, feel free to ask questions. I will try to explain and guide you.
from i18n.
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.
from i18n.
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.
from i18n.
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!
from i18n.
Related Issues (15)
- Translation preprocessor
- number, time and count functions type mismatch HOT 6
- Add HMR support HOT 1
- is there a nice way to use nanostores/i18n outside of react / react-hooks? HOT 27
- SSR Example HOT 4
- does nanostores/i18n process process lists in international way? HOT 1
- runtime error when NODE_ENV === 'production', HOT 6
- Error while using useStore HOT 4
- Usage in sandboxes HOT 2
- Nesting of translations HOT 3
- Add partial translation loading HOT 2
- Generate types for `params()` automatically by TS string parsing
- Not able to change language HOT 5
- Clears data from local storage after page refresh HOT 8
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from i18n.