ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Message List: Another attempt to fix frozen scroll

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-04-15 13:51:35 +02:00
parent 7e3a6507dc
commit 56b0df97e4
1 changed files with 13 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/middle/MiddleColumn.tsx
View File

@ -66,7 +66,6 @@ import usePrevious from '../../hooks/usePrevious';
import useForceUpdate from '../../hooks/useForceUpdate'; import useForceUpdate from '../../hooks/useForceUpdate';
import useSyncEffect from '../../hooks/useSyncEffect'; import useSyncEffect from '../../hooks/useSyncEffect';
import useAppLayout from '../../hooks/useAppLayout'; import useAppLayout from '../../hooks/useAppLayout';
import useTimeout from '../../hooks/useTimeout';
import usePinnedMessage from './hooks/usePinnedMessage'; import usePinnedMessage from './hooks/usePinnedMessage';
import Transition from '../ui/Transition'; import Transition from '../ui/Transition';
@ -85,6 +84,7 @@ import GiftPremiumModal from '../main/premium/GiftPremiumModal.async';
import MessageLanguageModal from './MessageLanguageModal.async'; import MessageLanguageModal from './MessageLanguageModal.async';
import './MiddleColumn.scss'; import './MiddleColumn.scss';
import styles from './MiddleColumn.module.scss'; import styles from './MiddleColumn.module.scss';
interface OwnProps { interface OwnProps {
@ -254,7 +254,7 @@ const MiddleColumn: FC<OwnProps & StateProps> = ({
prevTransitionKey !== undefined && prevTransitionKey < currentTransitionKey ? prevTransitionKey : undefined prevTransitionKey !== undefined && prevTransitionKey < currentTransitionKey ? prevTransitionKey : undefined
); );
const { isReady, handleOpenEnd, handleSlideStop } = useIsReady( const { isReady, handleCssTransitionEnd, handleSlideTransitionStop } = useIsReady(
!shouldSkipHistoryAnimations && animationLevel !== ANIMATION_LEVEL_MIN, !shouldSkipHistoryAnimations && animationLevel !== ANIMATION_LEVEL_MIN,
currentTransitionKey, currentTransitionKey,
prevTransitionKey, prevTransitionKey,
@ -434,7 +434,7 @@ const MiddleColumn: FC<OwnProps & StateProps> = ({
<div <div
id="MiddleColumn" id="MiddleColumn"
className={className} className={className}
onTransitionEnd={handleOpenEnd} onTransitionEnd={handleCssTransitionEnd}
style={` style={`
--composer-hidden-scale: ${composerHiddenScale}; --composer-hidden-scale: ${composerHiddenScale};
--toolbar-hidden-scale: ${toolbarHiddenScale}; --toolbar-hidden-scale: ${toolbarHiddenScale};
@ -471,7 +471,7 @@ const MiddleColumn: FC<OwnProps & StateProps> = ({
activeKey={currentTransitionKey} activeKey={currentTransitionKey}
shouldCleanup shouldCleanup
cleanupExceptionKey={cleanupExceptionKey} cleanupExceptionKey={cleanupExceptionKey}
onStop={handleSlideStop} onStop={handleSlideTransitionStop}
> >
<MessageList <MessageList
key={`${renderingChatId}-${renderingThreadId}-${renderingMessageListType}`} key={`${renderingChatId}-${renderingThreadId}-${renderingMessageListType}`}
@ -741,6 +741,11 @@ function useIsReady(
if (willSwitchMessageList) { if (willSwitchMessageList) {
if (withAnimations) { if (withAnimations) {
setIsReady(false); setIsReady(false);
// Make sure to end even if end callback was not called (which was some hardly-reproducible bug)
setTimeout(() => {
setIsReady(true);
}, LAYER_ANIMATION_DURATION_MS);
} else { } else {
forceUpdate(); forceUpdate();
} }
@ -752,25 +757,19 @@ function useIsReady(
} }
}, [withAnimations]); }, [withAnimations]);
useTimeout(() => { function handleCssTransitionEnd(e: React.TransitionEvent<HTMLDivElement>) {
if (!isReady) {
setIsReady(true);
}
}, LAYER_ANIMATION_DURATION_MS);
function handleOpenEnd(e: React.TransitionEvent<HTMLDivElement>) {
if (e.propertyName === 'transform' && e.target === e.currentTarget) { if (e.propertyName === 'transform' && e.target === e.currentTarget) {
setIsReady(Boolean(chatId)); setIsReady(Boolean(chatId));
} }
} }
function handleSlideStop() { function handleSlideTransitionStop() {
setIsReady(true); setIsReady(true);
} }
return { return {
isReady: isReady && !willSwitchMessageList, isReady: isReady && !willSwitchMessageList,
handleOpenEnd: withAnimations ? handleOpenEnd : undefined, handleCssTransitionEnd: withAnimations ? handleCssTransitionEnd : undefined,
handleSlideStop: withAnimations ? handleSlideStop : undefined, handleSlideTransitionStop: withAnimations ? handleSlideTransitionStop : undefined,
}; };
} }