From 7beac900b24f317cdda78af296f5e868bfd02b20 Mon Sep 17 00:00:00 2001
From: Giuseppe Ciotola <30926550+gciotola@users.noreply.github.com>
Date: Thu, 19 Dec 2024 17:27:10 +0100
Subject: [PATCH] fix: improve loading state in i18n provider

---
 packages/app-elements/src/main.ts                        | 1 +
 packages/app-elements/src/providers/I18NProvider.tsx     | 3 ++-
 packages/app-elements/src/ui/composite/Routes/Routes.tsx | 6 +++++-
 packages/app-elements/src/ui/composite/Routes/index.tsx  | 7 ++++++-
 4 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/app-elements/src/main.ts b/packages/app-elements/src/main.ts
index 07dc1386..f32fc7e0 100644
--- a/packages/app-elements/src/main.ts
+++ b/packages/app-elements/src/main.ts
@@ -183,6 +183,7 @@ export {
   createRoute,
   createTypedRoute,
   GenericPageNotFound,
+  LoadingPage,
   Routes,
   type GetParams,
   type PageProps,
diff --git a/packages/app-elements/src/providers/I18NProvider.tsx b/packages/app-elements/src/providers/I18NProvider.tsx
index 2e4c35e5..6e7ee840 100644
--- a/packages/app-elements/src/providers/I18NProvider.tsx
+++ b/packages/app-elements/src/providers/I18NProvider.tsx
@@ -1,3 +1,4 @@
+import { LoadingPage } from '#ui/composite/Routes/Routes'
 import i18n, { type i18n as I18nInstance } from 'i18next'
 import LanguageDetector from 'i18next-browser-languagedetector'
 import resourcesToBackend from 'i18next-resources-to-backend'
@@ -55,7 +56,7 @@ export const I18NProvider: React.FC<I18NProviderProps> = ({
     i18nInstance == null ||
     (i18nInstance != null && !i18nInstance.isInitialized)
   ) {
-    return <div>Loading i18n</div>
+    return <LoadingPage />
   }
 
   return <I18nextProvider i18n={i18nInstance}>{children}</I18nextProvider>
diff --git a/packages/app-elements/src/ui/composite/Routes/Routes.tsx b/packages/app-elements/src/ui/composite/Routes/Routes.tsx
index 263b3248..ce98b2a5 100644
--- a/packages/app-elements/src/ui/composite/Routes/Routes.tsx
+++ b/packages/app-elements/src/ui/composite/Routes/Routes.tsx
@@ -107,7 +107,11 @@ function Route({
   )
 }
 
-function LoadingPage({ overlay = false }: { overlay?: boolean }): JSX.Element {
+export function LoadingPage({
+  overlay = false
+}: {
+  overlay?: boolean
+}): JSX.Element {
   const {
     settings: { mode }
   } = useTokenProvider()
diff --git a/packages/app-elements/src/ui/composite/Routes/index.tsx b/packages/app-elements/src/ui/composite/Routes/index.tsx
index 58a15043..aab6ddf5 100644
--- a/packages/app-elements/src/ui/composite/Routes/index.tsx
+++ b/packages/app-elements/src/ui/composite/Routes/index.tsx
@@ -1,4 +1,9 @@
-export { GenericPageNotFound, Routes, type PageProps } from './Routes'
+export {
+  GenericPageNotFound,
+  LoadingPage,
+  Routes,
+  type PageProps
+} from './Routes'
 export {
   createRoute,
   createTypedRoute,