From 76d2101d8764620fd9d1859c9503538ec2a73821 Mon Sep 17 00:00:00 2001
From: Maxime Quandalle <maxime@quandalle.com>
Date: Tue, 24 Sep 2019 14:29:58 +0200
Subject: [PATCH] =?UTF-8?q?Ne=20pas=20afficher=20l'animatedValue=20en=20ca?=
 =?UTF-8?q?s=20de=20changement=20de=20p=C3=A9riode?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 source/components/ui/AnimatedTargetValue.js | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/source/components/ui/AnimatedTargetValue.js b/source/components/ui/AnimatedTargetValue.js
index 5e447ca00..a5c1d86a7 100644
--- a/source/components/ui/AnimatedTargetValue.js
+++ b/source/components/ui/AnimatedTargetValue.js
@@ -3,6 +3,7 @@ import React, { useRef } from 'react'
 import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
 import { useTranslation } from 'react-i18next'
 import { formatCurrency } from 'Engine/format'
+import { usePeriod } from 'Selectors/analyseSelectors'
 import './AnimatedTargetValue.css'
 
 type Props = {
@@ -18,13 +19,21 @@ export default function AnimatedTargetValue({ value, children }: Props) {
 	const previousValue = useRef()
 	const { language } = useTranslation().i18n
 
+	// We don't want to show the animated if the difference comes from a change in the period
+	const currentPeriod = usePeriod()
+	const previousPeriod = useRef(currentPeriod)
+
 	const difference =
 		previousValue.current === value || Number.isNaN(value)
 			? null
 			: (value || 0) - (previousValue.current || 0)
-	previousValue.current = value
 	const shouldDisplayDifference =
-		difference !== null && Math.abs(difference) > 1
+		difference !== null &&
+		previousPeriod.current === currentPeriod &&
+		Math.abs(difference) > 1
+
+	previousValue.current = value
+	previousPeriod.current = currentPeriod
 
 	return (
 		<>