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

Message List: Fix scrolling gets stuck in message list (#2893)

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-03-30 18:26:20 -05:00
parent 07658472b5
commit 5dadb3c3c9
1 changed files with 10 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -66,6 +66,7 @@ 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';
@ -138,6 +139,8 @@ function isImage(item: DataTransferItem) {
return item.kind === 'file' && item.type && SUPPORTED_IMAGE_CONTENT_TYPES.has(item.type); return item.kind === 'file' && item.type && SUPPORTED_IMAGE_CONTENT_TYPES.has(item.type);
} }
const LAYER_ANIMATION_DURATION_MS = 450 + ANIMATION_END_DELAY;
const MiddleColumn: FC<OwnProps & StateProps> = ({ const MiddleColumn: FC<OwnProps & StateProps> = ({
chatId, chatId,
threadId, threadId,
@ -206,7 +209,7 @@ const MiddleColumn: FC<OwnProps & StateProps> = ({
const [isUnpinModalOpen, setIsUnpinModalOpen] = useState(false); const [isUnpinModalOpen, setIsUnpinModalOpen] = useState(false);
const isMobileSearchActive = isMobile && hasCurrentTextSearch; const isMobileSearchActive = isMobile && hasCurrentTextSearch;
const closeAnimationDuration = isMobile ? 450 + ANIMATION_END_DELAY : undefined; const closeAnimationDuration = isMobile ? LAYER_ANIMATION_DURATION_MS : undefined;
const hasTools = hasPinned && ( const hasTools = hasPinned && (
windowWidth < MOBILE_SCREEN_MAX_WIDTH windowWidth < MOBILE_SCREEN_MAX_WIDTH
|| ( || (
@ -744,6 +747,12 @@ function useIsReady(
} }
}, [withAnimations]); }, [withAnimations]);
useTimeout(() => {
if (!isReady) {
setIsReady(true);
}
}, LAYER_ANIMATION_DURATION_MS);
function handleOpenEnd(e: React.TransitionEvent<HTMLDivElement>) { 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));