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

[Perf] Message List: Keep previous slide and fix isReady when animating

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-12-10 18:33:09 +01:00
parent 175dbd52bf
commit 9d58257319
1 changed files with 21 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -45,13 +45,14 @@ import {
import captureEscKeyListener from '../../util/captureEscKeyListener'; import captureEscKeyListener from '../../util/captureEscKeyListener';
import { pick } from '../../util/iteratees'; import { pick } from '../../util/iteratees';
import buildClassName from '../../util/buildClassName'; import buildClassName from '../../util/buildClassName';
import { createMessageHash } from '../../util/routing';
import useCustomBackground from '../../hooks/useCustomBackground'; import useCustomBackground from '../../hooks/useCustomBackground';
import useWindowSize from '../../hooks/useWindowSize'; import useWindowSize from '../../hooks/useWindowSize';
import usePrevDuringAnimation from '../../hooks/usePrevDuringAnimation'; import usePrevDuringAnimation from '../../hooks/usePrevDuringAnimation';
import calculateMiddleFooterTransforms from './helpers/calculateMiddleFooterTransforms';
import useLang from '../../hooks/useLang'; import useLang from '../../hooks/useLang';
import useHistoryBack from '../../hooks/useHistoryBack'; import useHistoryBack from '../../hooks/useHistoryBack';
import { createMessageHash } from '../../util/routing'; import usePrevious from '../../hooks/usePrevious';
import calculateMiddleFooterTransforms from './helpers/calculateMiddleFooterTransforms';
import Transition from '../ui/Transition'; import Transition from '../ui/Transition';
import MiddleHeader from './MiddleHeader'; import MiddleHeader from './MiddleHeader';
@ -186,6 +187,15 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
const renderingCanStartBot = usePrevDuringAnimation(canStartBot, CLOSE_ANIMATION_DURATION); const renderingCanStartBot = usePrevDuringAnimation(canStartBot, CLOSE_ANIMATION_DURATION);
const renderingCanRestartBot = usePrevDuringAnimation(canRestartBot, CLOSE_ANIMATION_DURATION); const renderingCanRestartBot = usePrevDuringAnimation(canRestartBot, CLOSE_ANIMATION_DURATION);
const prevTransitionKey = usePrevious(currentTransitionKey);
const willSwitchMessageList = prevTransitionKey !== undefined && prevTransitionKey !== currentTransitionKey;
if (willSwitchMessageList) {
setIsReady(false);
}
const cleanupExceptionKey = (
prevTransitionKey !== undefined && prevTransitionKey < currentTransitionKey ? prevTransitionKey : undefined
);
useEffect(() => { useEffect(() => {
return chatId return chatId
? captureEscKeyListener(() => { ? captureEscKeyListener(() => {
@ -329,9 +339,11 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
openChat({ id: undefined }, true); openChat({ id: undefined }, true);
}; };
useHistoryBack(renderingChatId && renderingThreadId, useHistoryBack(
renderingChatId && renderingThreadId,
closeChat, undefined, undefined, undefined, closeChat, undefined, undefined, undefined,
messageLists ? messageLists.map(createMessageHash) : []); messageLists?.map(createMessageHash) || [],
);
useHistoryBack(isMobileSearchActive, closeLocalTextSearch); useHistoryBack(isMobileSearchActive, closeLocalTextSearch);
useHistoryBack(isSelectModeActive, exitMessageSelectMode); useHistoryBack(isSelectModeActive, exitMessageSelectMode);
@ -374,12 +386,14 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
chatId={renderingChatId} chatId={renderingChatId}
threadId={renderingThreadId} threadId={renderingThreadId}
messageListType={renderingMessageListType} messageListType={renderingMessageListType}
isReady={isReady} isReady={isReady && !willSwitchMessageList}
/> />
<Transition <Transition
name={shouldSkipHistoryAnimations ? 'none' : animationLevel === ANIMATION_LEVEL_MAX ? 'slide' : 'fade'} name={shouldSkipHistoryAnimations ? 'none' : animationLevel === ANIMATION_LEVEL_MAX ? 'slide' : 'fade'}
activeKey={currentTransitionKey} activeKey={currentTransitionKey}
shouldCleanup shouldCleanup
cleanupExceptionKey={cleanupExceptionKey}
onStop={() => setIsReady(true)}
> >
{(isActive) => ( {(isActive) => (
<> <>
@ -392,7 +406,7 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
hasTools={renderingHasTools} hasTools={renderingHasTools}
onFabToggle={setIsFabShown} onFabToggle={setIsFabShown}
onNotchToggle={setIsNotchShown} onNotchToggle={setIsNotchShown}
isReady={isReady} isReady={isReady && !willSwitchMessageList}
isActive={isActive} isActive={isActive}
/> />
<div className={footerClassName}> <div className={footerClassName}>
@ -403,7 +417,7 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
messageListType={renderingMessageListType} messageListType={renderingMessageListType}
dropAreaState={dropAreaState} dropAreaState={dropAreaState}
onDropHide={handleHideDropArea} onDropHide={handleHideDropArea}
isReady={isReady} isReady={isReady && !willSwitchMessageList}
/> />
)} )}
{isPinnedMessageList && ( {isPinnedMessageList && (