fix: improve loading state in i18n provider

commercelayer · Dec 19, 2024 · 7beac90 · 7beac90
1 parent ad44ccd
commit 7beac90
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -1,4 +1,9 @@
-export { GenericPageNotFound, Routes, type PageProps } from './Routes'
+export {
+  GenericPageNotFound,
+  LoadingPage,
+  Routes,
+  type PageProps
+} from './Routes'
 export {
   createRoute,
   createTypedRoute,