fix: let user message entry animation finish instead of snapping

This commit is contained in:
Bohdan Triapitsyn
2026-07-20 21:10:59 +03:00
parent 841c6639b8
commit ac24d321f4
@@ -38,10 +38,19 @@ export const FadeInOnReveal: React.FC<FadeInOnRevealProps> = ({
window.matchMedia('(prefers-reduced-motion: reduce)').matches; window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const shouldSkip = Boolean(skipAnimation) || (!ignoreContextDisabled && contextDisabled) || reducedMotion; const shouldSkip = Boolean(skipAnimation) || (!ignoreContextDisabled && contextDisabled) || reducedMotion;
const animationEnabled = FADE_ANIMATION_ENABLED || forceAnimation; const animationEnabled = FADE_ANIMATION_ENABLED || forceAnimation;
const [visible, setVisible] = React.useState(shouldSkip); // Latch the animate/skip decision at mount. If skipAnimation flips to true
// mid-transition (e.g. the "animate on mount" flag is consumed on the next
// re-render), unwrapping the animated div would cut the translate short and
// visibly snap the content up by the remaining offset.
const animateRef = React.useRef<boolean | null>(null);
if (animateRef.current === null) {
animateRef.current = animationEnabled && !shouldSkip;
}
const animate = animateRef.current;
const [visible, setVisible] = React.useState(!animate);
React.useEffect(() => { React.useEffect(() => {
if (!animationEnabled || shouldSkip) { if (!animate) {
return; return;
} }
@@ -64,9 +73,9 @@ export const FadeInOnReveal: React.FC<FadeInOnRevealProps> = ({
window.cancelAnimationFrame(frame); window.cancelAnimationFrame(frame);
} }
}; };
}, [animationEnabled, shouldSkip]); }, [animate]);
if (!animationEnabled || shouldSkip) { if (!animate) {
return <>{children}</>; return <>{children}</>;
} }