From eea6f8121a1d4b9ae543a2f05ca6672ca31c3b22 Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Tue, 16 Apr 2024 21:46:18 +0800
Subject: [PATCH] Enable suspense mode for i18n library

The changes introduce suspense mode in the i18n settings, waiting until all languages are loaded. The loading state now shows a global loading
---
 apps/web/app/loading.tsx           |  5 +++++
 apps/web/lib/i18n/i18n.settings.ts |  3 +++
 packages/i18n/src/i18n.client.ts   | 25 ++++++++++---------------
 3 files changed, 18 insertions(+), 15 deletions(-)
 create mode 100644 apps/web/app/loading.tsx

diff --git a/apps/web/app/loading.tsx b/apps/web/app/loading.tsx
new file mode 100644
index 000000000..016865ebd
--- /dev/null
+++ b/apps/web/app/loading.tsx
@@ -0,0 +1,5 @@
+import { GlobalLoader } from '@kit/ui/global-loader';
+
+export default function Loading() {
+  return <GlobalLoader displaySpinner={false} />;
+}
diff --git a/apps/web/lib/i18n/i18n.settings.ts b/apps/web/lib/i18n/i18n.settings.ts
index cb35e57eb..ec7975cfd 100644
--- a/apps/web/lib/i18n/i18n.settings.ts
+++ b/apps/web/lib/i18n/i18n.settings.ts
@@ -61,5 +61,8 @@ export function getI18nSettings(
     fallbackNS: defaultI18nNamespaces,
     defaultNS: defaultI18nNamespaces,
     ns,
+    react: {
+      useSuspense: true,
+    },
   };
 }
diff --git a/packages/i18n/src/i18n.client.ts b/packages/i18n/src/i18n.client.ts
index 04690ddaf..ebc7373ee 100644
--- a/packages/i18n/src/i18n.client.ts
+++ b/packages/i18n/src/i18n.client.ts
@@ -14,20 +14,24 @@ export async function initializeI18nClient(
   settings: InitOptions,
   resolver: (lang: string, namespace: string) => Promise<object>,
 ): Promise<i18n> {
-  if (clientInstance?.isInitialized) {
+  if (clientInstance) {
     return Promise.resolve(clientInstance);
   }
 
+  const loadedLanguages: string[] = [];
+
   await i18next
-    .use(initReactI18next)
     .use(
       resourcesToBackend(async (language, namespace, callback) => {
         const data = await resolver(language, namespace);
 
+        loadedLanguages.push(language);
+
         return callback(null, data);
       }),
     )
     .use(LanguageDetector)
+    .use(initReactI18next)
     .init(
       {
         ...settings,
@@ -47,19 +51,10 @@ export async function initializeI18nClient(
       },
     );
 
-  console.log('i18n client initialized');
-
-  console.log(
-    `initialized with ${i18next.languages.join(', ')} languages`,
-    clientInstance,
-  );
-
-  console.log(
-    'resource',
-    i18next.getResource('en', 'billing', 'billingInterval.month'),
-  );
-
-  console.log(i18next.t('billing:billingInterval.month'));
+  // keep component suspended until all languages are loaded
+  if (loadedLanguages.length !== settings.ns?.length) {
+    throw new Error();
+  }
 
   clientInstance = i18next;