From 09ccdbb4c74bb72cdb8e134781428e82f0c825c5 Mon Sep 17 00:00:00 2001
From: Johan Girod <johan.girod@beta.gouv.fr>
Date: Fri, 22 Sep 2023 14:00:46 +0200
Subject: [PATCH] Move date-fns in async lazy component

---
 .../components/conversation/DateInput.tsx     | 42 ++++++++++++-------
 site/source/components/ui/Skeleton.tsx        | 17 ++++----
 2 files changed, 38 insertions(+), 21 deletions(-)

diff --git a/site/source/components/conversation/DateInput.tsx b/site/source/components/conversation/DateInput.tsx
index cf59f4b9d..7a6c2b7b2 100644
--- a/site/source/components/conversation/DateInput.tsx
+++ b/site/source/components/conversation/DateInput.tsx
@@ -1,13 +1,16 @@
-import { useCallback } from 'react'
+import { lazy, Suspense, useCallback } from 'react'
+import styled from 'styled-components'
 
 import { InputProps } from '@/components/conversation/RuleInput'
-import { DateField } from '@/design-system/field'
 import { DateFieldProps } from '@/design-system/field/DateField'
 import { Spacing } from '@/design-system/layout'
 
+import Skeleton from '../ui/Skeleton'
 import { useEngine } from '../utils/EngineContext'
 import InputSuggestions from './InputSuggestions'
 
+const DateField = lazy(() => import('@/design-system/field/DateField'))
+
 export default function DateInput({
 	suggestions,
 	onChange,
@@ -62,20 +65,31 @@ export default function DateInput({
 						}}
 					/>
 				)}
-				<DateField
-					defaultSelected={
-						(missing && hideDefaultValue) || !dateValue
-							? undefined
-							: new Date(dateValue)
-					}
-					isRequired={required}
-					onChange={handleDateChange}
-					aria-label={title}
-					label={title}
-					type={type}
-				/>
+				<Suspense fallback={<DateFieldFallback />}>
+					<DateField
+						defaultSelected={
+							(missing && hideDefaultValue) || !dateValue
+								? undefined
+								: new Date(dateValue)
+						}
+						isRequired={required}
+						onChange={handleDateChange}
+						aria-label={title}
+						label={title}
+						type={type}
+					/>
+				</Suspense>
 				<Spacing md />
 			</div>
 		</div>
 	)
 }
+function DateFieldFallback() {
+	return <Wrapper />
+}
+
+const Wrapper = styled(Skeleton)`
+	width: 218px;
+
+	height: 3.5rem;
+`
diff --git a/site/source/components/ui/Skeleton.tsx b/site/source/components/ui/Skeleton.tsx
index f2a25ab0c..895c22da4 100644
--- a/site/source/components/ui/Skeleton.tsx
+++ b/site/source/components/ui/Skeleton.tsx
@@ -1,8 +1,11 @@
+import { CSSProperties } from 'react'
 import { keyframes, styled } from 'styled-components'
 
 type SkeletonProps = {
 	width?: number
 	height?: number
+	className?: string
+	style?: CSSProperties
 }
 
 const skeletonKeyframes = keyframes`
@@ -14,14 +17,14 @@ const skeletonKeyframes = keyframes`
   }
 ` as unknown as string // keyframes type are outdated, see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/48907
 
-export default function Skeleton({ width, height }: SkeletonProps) {
+export default function Skeleton({
+	style,
+	className,
+	height,
+	width,
+}: SkeletonProps) {
 	return (
-		<StyledSpan
-			style={{
-				width,
-				height,
-			}}
-		>
+		<StyledSpan className={className} style={{ ...style, height, width }}>
 			&zwnj;
 		</StyledSpan>
 	)