Improve tree shaking and dynamic loading, fix translations in production build. Moved i18n settings to the application's side.

apps/web/components/root-providers.tsx

@@ -1,10 +1,12 @@
 'use client';
 
+import dynamic from 'next/dynamic';
+
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryStreamedHydration } from '@tanstack/react-query-next-experimental';
 import { ThemeProvider } from 'next-themes';
 
-import { CaptchaProvider, CaptchaTokenSetter } from '@kit/auth/captcha/client';
+import { CaptchaProvider } from '@kit/auth/captcha/client';
 import { I18nProvider } from '@kit/i18n/provider';
 import { AuthChangeListener } from '@kit/supabase/components/auth-change-listener';
 
@@ -12,24 +14,39 @@ import appConfig from '~/config/app.config';
 import authConfig from '~/config/auth.config';
 import pathsConfig from '~/config/paths.config';
 import { i18nResolver } from '~/lib/i18n/i18n.resolver';
+import { getI18nSettings } from '~/lib/i18n/i18n.settings';
 
 const captchaSiteKey = authConfig.captchaTokenSiteKey;
 const queryClient = new QueryClient();
 
+const CaptchaTokenSetter = dynamic(async () => {
+  if (!captchaSiteKey) {
+    return Promise.resolve(() => null);
+  }
+
+  const { CaptchaTokenSetter } = await import('@kit/auth/captcha/client');
+
+  return {
+    default: CaptchaTokenSetter,
+  };
+});
+
 export function RootProviders({
   lang,
   children,
 }: React.PropsWithChildren<{
   lang: string;
 }>) {
+  const i18nSettings = getI18nSettings(lang);
+
   return (
     <QueryClientProvider client={queryClient}>
       <ReactQueryStreamedHydration>
-        <CaptchaProvider>
-          <CaptchaTokenSetter siteKey={captchaSiteKey} />
+        <I18nProvider settings={i18nSettings} resolver={i18nResolver}>
+          <CaptchaProvider>
+            <CaptchaTokenSetter siteKey={captchaSiteKey} />
 
-          <AuthChangeListener appHomePath={pathsConfig.app.home}>
-            <I18nProvider lang={lang} resolver={i18nResolver}>
+            <AuthChangeListener appHomePath={pathsConfig.app.home}>
               <ThemeProvider
                 attribute="class"
                 enableSystem
@@ -38,9 +55,9 @@ export function RootProviders({
               >
                 {children}
               </ThemeProvider>
-            </I18nProvider>
-          </AuthChangeListener>
-        </CaptchaProvider>
+            </AuthChangeListener>
+          </CaptchaProvider>
+        </I18nProvider>
       </ReactQueryStreamedHydration>
     </QueryClientProvider>
   );