From 4fcbb840251d2d7d8e268fe555ffec84987de6c4 Mon Sep 17 00:00:00 2001
From: Tom Lienard <tom.lienrd@gmail.com>
Date: Thu, 12 Oct 2023 08:42:56 +0200
Subject: [PATCH] feat(next-international): only trigger suspense on first load
 (#234)

---
 examples/next-app/locales/client.ts              | 10 ++++++++--
 .../app/client/create-i18n-provider-client.tsx   |  9 ++++++++-
 .../src/app/client/create-use-change-locale.ts   | 16 +++++++++++++---
 .../next-international/src/app/client/index.ts   |  2 +-
 4 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/examples/next-app/locales/client.ts b/examples/next-app/locales/client.ts
index 33b7f62..45bbb32 100644
--- 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
index a18043d..cd3fffc 100644
--- 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
index 72ee741..1986ccd 100644
--- 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
index 5b91d4f..c0c73fc 100644
--- 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 {