From 7fe69b37cdadb4f1e7135080029e484530e6b181 Mon Sep 17 00:00:00 2001
From: Johan Girod <johan.girod@beta.gouv.fr>
Date: Thu, 26 Aug 2021 19:46:41 +0200
Subject: [PATCH] wip

---
 mon-entreprise/source/components/BarChart.tsx |  3 +-
 .../utils/DisableAnimationContext.tsx         | 29 ++++++++++---------
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/mon-entreprise/source/components/BarChart.tsx b/mon-entreprise/source/components/BarChart.tsx
index cecdad6c7..91ded791e 100644
--- a/mon-entreprise/source/components/BarChart.tsx
+++ b/mon-entreprise/source/components/BarChart.tsx
@@ -20,10 +20,11 @@ function ChartItemBar({
 	percentage,
 }: ChartItemBarProps) {
 	const language = useTranslation().i18n.language
+	const disableAnimation = useContext(DisableAnimationContext)
 	const style = useSpring({
 		config: config.slow,
 		delay: 100,
-		immediate: useContext(DisableAnimationContext),
+		immediate: disableAnimation,
 		from: {
 			flex: 0,
 		},
diff --git a/mon-entreprise/source/components/utils/DisableAnimationContext.tsx b/mon-entreprise/source/components/utils/DisableAnimationContext.tsx
index 21dc23302..5e90bb96e 100644
--- a/mon-entreprise/source/components/utils/DisableAnimationContext.tsx
+++ b/mon-entreprise/source/components/utils/DisableAnimationContext.tsx
@@ -1,22 +1,24 @@
-import React, { createContext, useCallback, useEffect, useState } from 'react'
+import React, { createContext, useEffect, useState } from 'react'
+import { flushSync } from 'react-dom'
+
 export const DisableAnimationContext = createContext(false)
 
 export const useIsPrintContext = () => {
 	const [isPrintContext, setPrintContext] = useState(false)
-	const onPrintContextChange = useCallback(
-		(matchMedia: MediaQueryListEvent | MediaQueryList) => {
-			setPrintContext(matchMedia.matches)
-		},
-		[setPrintContext]
-	)
+
 	useEffect(() => {
-		const matchMediaPrint = window.matchMedia('print')
-		onPrintContextChange(matchMediaPrint)
-		matchMediaPrint.addEventListener('change', onPrintContextChange)
-		return () => {
-			matchMediaPrint.removeEventListener('change', onPrintContextChange)
+		const matchListener = (matchMedia: MediaQueryListEvent) => {
+			setPrintContext(matchMedia.matches)
+			flushSync(() => setPrintContext(matchMedia.matches))
 		}
-	}, [onPrintContextChange])
+		const matchMediaPrint = window.matchMedia('print')
+
+		setPrintContext(matchMediaPrint.matches)
+		matchMediaPrint.addEventListener('change', matchListener)
+		return () => {
+			matchMediaPrint.removeEventListener('change', matchListener)
+		}
+	}, [])
 
 	// Fix for Firefox (see https://bugzilla.mozilla.org/show_bug.cgi?id=774398)
 	useEffect(() => {
@@ -35,7 +37,6 @@ export function DisableAnimationOnPrintProvider({
 	children: React.ReactNode
 }) {
 	const isPrintContext = useIsPrintContext()
-	console.log(isPrintContext)
 	return (
 		<DisableAnimationContext.Provider value={isPrintContext}>
 			{children}