From c9536d4e77b1e190d6bc3ca682225ff8cb71107d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Rialland?= <jeremyrialland.pro@gmail.com>
Date: Thu, 16 Dec 2021 17:39:19 +0100
Subject: [PATCH] =?UTF-8?q?Fix=20de=20l'animation=20au=20changement=20de?=
 =?UTF-8?q?=20valeur=20du=20simulateur.=20AnimatedTargetValue=20n'=C3=A9ta?=
 =?UTF-8?q?it=20pas=20d=C3=A9terministe=20et=20ne=20fonctionnais=20pas=20e?=
 =?UTF-8?q?n=20mode=20dev=20avec=20le=20StrictMode=20React.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ui/AnimatedTargetValue.tsx     | 32 ++++++++++---------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/site/source/components/ui/AnimatedTargetValue.tsx b/site/source/components/ui/AnimatedTargetValue.tsx
index 977d03ee0..759ab9da4 100644
--- a/site/source/components/ui/AnimatedTargetValue.tsx
+++ b/site/source/components/ui/AnimatedTargetValue.tsx
@@ -18,21 +18,25 @@ export default function AnimatedTargetValue({
 	value,
 }: AnimatedTargetValueProps) {
 	const previousValue = useRef<number>()
+	const previousDifference = useRef<number>()
 	const { language } = useTranslation().i18n
 
 	const unit = useSelector(targetUnitSelector)
 	const previousUnit = useRef(unit)
 
-	const difference =
+	let difference =
 		value == null ||
 		previousValue.current == null ||
 		// We don't want to show the animated if the difference comes from a change in the unit
 		previousUnit.current !== unit
-			? null
+			? undefined
 			: value - previousValue.current
 
 	if (previousValue.current !== value) {
 		previousValue.current = value
+		previousDifference.current = difference
+	} else {
+		difference = previousDifference.current
 	}
 	if (previousUnit.current !== unit) {
 		previousUnit.current = unit
@@ -42,19 +46,17 @@ export default function AnimatedTargetValue({
 		return null
 	}
 	return (
-		<>
-			<div
-				key={difference}
-				css={`
-					position: relative;
-					text-align: right;
-				`}
-			>
-				<StyledEvaporate>
-					{formatDifference(difference ?? 0, language)}
-				</StyledEvaporate>
-			</div>
-		</>
+		<div
+			key={difference}
+			css={`
+				position: relative;
+				text-align: right;
+			`}
+		>
+			<StyledEvaporate>
+				{formatDifference(difference ?? 0, language)}
+			</StyledEvaporate>
+		</div>
 	)
 }