From c7e879f450c2766c9663c1a887de2e1d79114a37 Mon Sep 17 00:00:00 2001
From: Orka Arnest CRUZE <orka.cruze@ign.fr>
Date: Tue, 22 Oct 2024 16:23:44 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20am=C3=A9liore=20temps=20de=20chargement?=
 =?UTF-8?q?=20de=20la=20page=20d'accueil?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/i18n/i18n.ts              |  2 +-
 assets/router/RouterRenderer.tsx | 29 ++++++++++++++++++-----------
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/assets/i18n/i18n.ts b/assets/i18n/i18n.ts
index 083281ab..603425d5 100644
--- 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
index 5e5a530b..42f2ba8e 100644
--- 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,6 +191,7 @@ const RouterRenderer: FC = () => {
 
     return (
         <Suspense
+            // affiche LoadingText pendant que les composants react "lazy" se chargent
             fallback={
                 <AppLayout>
                     <LoadingText />
@@ -200,13 +199,21 @@ const RouterRenderer: FC = () => {
             }
         >
             {/* 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>
     );
 };