Replies: 1 comment 2 replies
-
|
You could use the detected language to preload the translations rendering a export default function Root() {
let { locale } = useLoaderData<LoaderData>();
let { i18n } = useTranslation();
useChangeLanguage(locale);
let matches = useMatches()
let namespaces = [...new Set(matches.flatMap(match => match.handle?.i18n))]
return (
<html lang={locale} dir={i18n.dir()}>
<head>
<Meta />
<Links />
{namespaces.map(namespace => {
return <link key={namespace} rel="preload" as="fetch" href={`/locales/${locale}/${namespace}.json`} />
})}
</head>
<body>
{children}
<ScrollRestoration />
<Scripts />
<LiveReload />
</body>
</html>
);
} |
Beta Was this translation helpful? Give feedback.
2 replies
-
|
There's an undocumented component to do that for your Lines 19 to 48 in 8deb188 But I had issues working with it so I didn't mentioned in the docs. |
Beta Was this translation helpful? Give feedback.
-
|
Wow, yeah that is a whole lot easier then my current solution! thanks 👍 |
Beta Was this translation helpful? Give feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
As of now, when using this package with a http backend in the client it causes a loading waterfall on the initial load and delays react initialisation a few additional milliseconds.
I created a prove of concept with a custom i18n-backend in the client and wrapped translation files that eliminates this issue. But I'm not sure how feasible it is. Would anybody be interested in working on this?
Beta Was this translation helpful? Give feedback.
All reactions