feat(next-international): only trigger suspense on first load (#234)

QuiiBz · Oct 12, 2023 · 4fcbb84 · 4fcbb84
1 parent 1c15986
commit 4fcbb84
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 7 deletions.
diff --git a/examples/next-app/locales/client.ts b/examples/next-app/locales/client.ts
@@ -4,8 +4,14 @@ import { createI18nClient } from 'next-international/client';
 export const { useI18n, useScopedI18n, I18nProviderClient, useChangeLocale, defineLocale, useCurrentLocale } =
   createI18nClient(
     {
-      en: () => import('./en'),
-      fr: () => import('./fr'),
+      en: async () => {
+        await new Promise(resolve => setTimeout(resolve, 100));
+        return import('./en');
+      },
+      fr: async () => {
+        await new Promise(resolve => setTimeout(resolve, 100));
+        return import('./fr');
+      },
     },
     {
       // Uncomment to set base path

diff --git a/packages/next-international/src/app/client/create-i18n-provider-client.tsx b/packages/next-international/src/app/client/create-i18n-provider-client.tsx
@@ -12,13 +12,20 @@ type I18nProviderWrapperProps = {
   children: ReactNode;
 };
 
+export const localesCache = new Map<string, Record<string, unknown>>();
+
 export function createI18nProviderClient<Locale extends BaseLocale>(
   I18nClientContext: Context<LocaleContext<Locale> | null>,
   locales: ImportedLocales,
   fallbackLocale?: Record<string, unknown>,
 ) {
   function I18nProvider({ locale, children }: I18nProviderProps) {
-    const { default: clientLocale } = use(locales[locale as keyof typeof locales]());
+    let clientLocale: any = localesCache.get(locale);
+
+    if (!clientLocale) {
+      clientLocale = use(locales[locale as keyof typeof locales]()).default;
+      localesCache.set(locale, clientLocale);
+    }
 
     const value = useMemo(
       () => ({

diff --git a/packages/next-international/src/app/client/create-use-change-locale.ts b/packages/next-international/src/app/client/create-use-change-locale.ts
@@ -1,7 +1,13 @@
 import { useRouter, usePathname, useSearchParams } from 'next/navigation';
 import type { I18nChangeLocaleConfig, I18nClientConfig } from '../../types';
+import type { ImportedLocales } from 'international-types';
+import { localesCache } from './create-i18n-provider-client';
 
-export function createUseChangeLocale<LocalesKeys>(useCurrentLocale: () => LocalesKeys, config: I18nClientConfig) {
+export function createUseChangeLocale<LocalesKeys>(
+  useCurrentLocale: () => LocalesKeys,
+  locales: ImportedLocales,
+  config: I18nClientConfig,
+) {
   return function useChangeLocale(changeLocaleConfig?: I18nChangeLocaleConfig) {
     const { push, refresh } = useRouter();
     const currentLocale = useCurrentLocale();
@@ -24,8 +30,12 @@ export function createUseChangeLocale<LocalesKeys>(useCurrentLocale: () => Local
     }
 
     return function changeLocale(newLocale: LocalesKeys) {
-      push(`/${newLocale}${pathWithoutLocale}${finalSearchParams}`);
-      refresh();
+      locales[newLocale as keyof typeof locales]().then(module => {
+        localesCache.set(newLocale as string, module.default);
+
+        push(`/${newLocale}${pathWithoutLocale}${finalSearchParams}`);
+        refresh();
+      });
     };
   };
 }
diff --git a/packages/next-international/src/app/client/index.ts b/packages/next-international/src/app/client/index.ts
@@ -27,7 +27,7 @@ export function createI18nClient<Locales extends ImportedLocales, OtherLocales e
   const I18nProviderClient = createI18nProviderClient<Locale>(I18nClientContext, locales, config.fallbackLocale);
   const useI18n = createUsei18n(I18nClientContext);
   const useScopedI18n = createScopedUsei18n(I18nClientContext);
-  const useChangeLocale = createUseChangeLocale<LocalesKeys>(useCurrentLocale, config);
+  const useChangeLocale = createUseChangeLocale<LocalesKeys>(useCurrentLocale, locales, config);
   const defineLocale = createDefineLocale<Locale>();
 
   return {