Middle Column: Use blocking animation for Message List transition

This commit is contained in:
Alexander Zinchuk 2024-09-24 14:48:42 +02:00
parent 8e5236d102
commit 9fa6077fc7
2 changed files with 8 additions and 2 deletions

View File

@ -544,6 +544,7 @@ function MiddleColumn({
activeKey={currentTransitionKey} activeKey={currentTransitionKey}
shouldCleanup shouldCleanup
cleanupExceptionKey={cleanupExceptionKey} cleanupExceptionKey={cleanupExceptionKey}
isBlockingAnimation
onStop={handleSlideTransitionStop} onStop={handleSlideTransitionStop}
> >
<MessageList <MessageList

View File

@ -44,6 +44,7 @@ export type TransitionProps = {
className?: string; className?: string;
slideClassName?: string; slideClassName?: string;
withSwipeControl?: boolean; withSwipeControl?: boolean;
isBlockingAnimation?: boolean;
onStart?: NoneToVoidFunction; onStart?: NoneToVoidFunction;
onStop?: NoneToVoidFunction; onStop?: NoneToVoidFunction;
children: React.ReactNode | ChildrenFn; children: React.ReactNode | ChildrenFn;
@ -83,6 +84,7 @@ function Transition({
className, className,
slideClassName, slideClassName,
withSwipeControl, withSwipeControl,
isBlockingAnimation,
onStart, onStart,
onStop, onStop,
children, children,
@ -200,6 +202,7 @@ function Transition({
childNodes[activeIndex], childNodes[activeIndex],
childNodes[prevActiveIndex], childNodes[prevActiveIndex],
shouldRestoreHeight, shouldRestoreHeight,
isBlockingAnimation,
onStart, onStart,
onStop, onStop,
); );
@ -236,7 +239,7 @@ function Transition({
}); });
isAnimatingRef.current = true; isAnimatingRef.current = true;
const endHeavyAnimation = beginHeavyAnimation(); const endHeavyAnimation = beginHeavyAnimation(undefined, isBlockingAnimation);
onStart?.(); onStart?.();
toggleExtraClass(container, `Transition-${name}`, !isBackwards); toggleExtraClass(container, `Transition-${name}`, !isBackwards);
@ -321,6 +324,7 @@ function Transition({
shouldDisableAnimation, shouldDisableAnimation,
forceUpdate, forceUpdate,
withSwipeControl, withSwipeControl,
isBlockingAnimation,
cleanupOnlyKey, cleanupOnlyKey,
]); ]);
@ -394,6 +398,7 @@ function performSlideOptimized(
toSlide: ChildNode, toSlide: ChildNode,
fromSlide?: ChildNode, fromSlide?: ChildNode,
shouldRestoreHeight?: boolean, shouldRestoreHeight?: boolean,
isBlockingAnimation?: boolean,
onStart?: NoneToVoidFunction, onStart?: NoneToVoidFunction,
onStop?: NoneToVoidFunction, onStop?: NoneToVoidFunction,
) { ) {
@ -427,7 +432,7 @@ function performSlideOptimized(
} }
isAnimatingRef.current = true; isAnimatingRef.current = true;
const endHeavyAnimation = beginHeavyAnimation(); const endHeavyAnimation = beginHeavyAnimation(undefined, isBlockingAnimation);
onStart?.(); onStart?.();
toggleExtraClass(container, `Transition-${name}`, !isBackwards); toggleExtraClass(container, `Transition-${name}`, !isBackwards);