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 ( {children}