From 281cc91c451eb17c6bc568b695a2dd85506d1c0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Rialland?= <wiinxt@gmail.com>
Date: Tue, 31 Jan 2023 17:52:30 +0100
Subject: [PATCH] Add loader for lazy import simulator

---
 site/source/components/PageData.tsx | 36 +++++++++++++++++++++++++++--
 1 file changed, 34 insertions(+), 2 deletions(-)

diff --git a/site/source/components/PageData.tsx b/site/source/components/PageData.tsx
index 484934071..38a99ae45 100644
--- a/site/source/components/PageData.tsx
+++ b/site/source/components/PageData.tsx
@@ -8,9 +8,10 @@ import useSearchParamsSimulationSharing from '@/components/utils/useSearchParams
 import useSimulationConfig from '@/components/utils/useSimulationConfig'
 import { Chip } from '@/design-system'
 import { Emoji } from '@/design-system/emoji'
+import { Loader } from '@/design-system/icons/Loader'
 import { Spacing } from '@/design-system/layout'
 import { H1 } from '@/design-system/typography/heading'
-import { Intro } from '@/design-system/typography/paragraphs'
+import { Body, Intro } from '@/design-system/typography/paragraphs'
 import { DeepWriteable } from '@/pages/Simulateurs/cout-creation-entreprise/config'
 import { situationSelector } from '@/selectors/simulationSelectors'
 
@@ -104,7 +105,7 @@ export default function PageData(props: PageDataProps) {
 				{Component ? (
 					<Component />
 				) : LazyComponent ? (
-					<Suspense fallback={<>Loading</>}>
+					<Suspense fallback={<LoaderFallback />}>
 						<LazyComponent />
 					</Suspense>
 				) : null}
@@ -124,6 +125,37 @@ export default function PageData(props: PageDataProps) {
 		</CurrentSimulatorDataProvider>
 	)
 }
+
+const LoaderFallback = () => (
+	<StyledBody>
+		<div
+			css={`
+				height: 300px;
+				align-items: center;
+			`}
+		>
+			<span>Chargement en cours</span>
+			<Loader />
+		</div>
+	</StyledBody>
+)
+
+const StyledBody = styled(Body)`
+	height: 500px;
+
+	div {
+		text-align: center;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 100%;
+
+		span {
+			margin-right: ${({ theme }) => theme.spacings.sm};
+		}
+	}
+`
+
 const StyledSpan = styled.span`
 	margin-right: ${({ theme }) => theme.spacings.sm};
 `