feat: améliore temps de chargement de la page d'accueil

IGNF · Oct 22, 2024 · c7e879f · c7e879f
1 parent dff31fb
commit c7e879f
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 12 deletions.
diff --git a/assets/i18n/i18n.ts b/assets/i18n/i18n.ts
@@ -56,7 +56,7 @@ export type Translations<L extends Language> = GenericTranslations<ComponentKey,
 export type LocalizedString = Parameters<typeof resolveLocalizedString>[0];
 
 /** initialisation de l'instance de i18n */
-export const { useTranslation, getTranslation, resolveLocalizedString, useLang, $lang, useResolveLocalizedString, useIsI18nFetching } =
+export const { useTranslation, getTranslation, resolveLocalizedString, useLang, $lang, useResolveLocalizedString, useIsI18nFetching, I18nFetchingSuspense } =
     createI18nApi<ComponentKey>()(
         { languages, fallbackLanguage },
         {

diff --git a/assets/router/RouterRenderer.tsx b/assets/router/RouterRenderer.tsx
@@ -2,12 +2,12 @@ import { FC, JSX, Suspense, lazy, useMemo } from "react";
 
 import AppLayout from "../components/Layout/AppLayout";
 import LoadingText from "../components/Utils/LoadingText";
-import { useIsI18nFetching } from "../i18n/i18n";
+import { I18nFetchingSuspense } from "../i18n/i18n";
 import Home from "../pages/Home";
 import RedirectToLogin from "../pages/RedirectToLogin";
 import PageNotFound from "../pages/error/PageNotFound";
 import { useAuthStore } from "../stores/AuthStore";
-import { knownRoutes, publicRoutes, useRoute } from "./router";
+import { knownRoutes, publicRoutes, routes, useRoute } from "./router";
 
 const About = lazy(() => import("../pages/About"));
 const Documentation = lazy(() => import("../pages/Documentation"));
@@ -62,8 +62,6 @@ const RouterRenderer: FC = () => {
     const route = useRoute();
     const user = useAuthStore((state) => state.user);
 
-    const isI18nFetching = useIsI18nFetching();
-
     const content: JSX.Element = useMemo(() => {
         // vérification si la route demandée est bien connue/enregistrée
         if (route.name === false || !knownRoutes.includes(route.name)) {
@@ -193,20 +191,29 @@ const RouterRenderer: FC = () => {
 
     return (
         <Suspense
+            // affiche LoadingText pendant que les composants react "lazy" se chargent
             fallback={
                 <AppLayout>
                     <LoadingText />
                 </AppLayout>
             }
         >
             {/* on s'assure que les textes de traductions sont chargés */}
-            {isI18nFetching ? (
-                <AppLayout>
-                    <LoadingText />
-                </AppLayout>
-            ) : (
-                content
-            )}
+            <I18nFetchingSuspense
+                fallback={
+                    // fallback permet d'afficher LoadingText pendant que les textes de traductions se chargent
+                    // par contre, traitement particulier pour la page d'accueil, on affiche tout de suite le contenu de la page d'accueil. Le contenu sera mis à jour une fois les textes de traductions seront chargés
+                    route.name === routes.home().name ? (
+                        <Home />
+                    ) : (
+                        <AppLayout>
+                            <LoadingText />
+                        </AppLayout>
+                    )
+                }
+            >
+                {content}
+            </I18nFetchingSuspense>
         </Suspense>
     );
 };