diff --git a/src/components/middle/MessageList.tsx b/src/components/middle/MessageList.tsx index 0c7d66c95..4c0abbc14 100644 --- a/src/components/middle/MessageList.tsx +++ b/src/components/middle/MessageList.tsx @@ -162,6 +162,8 @@ const MessageList: FC = ({ const [hasFocusing, setHasFocusing] = useState(Boolean(focusingId)); const areMessagesLoaded = Boolean(messageIds); + const isFocusing = Boolean(focusingId); + useOnChange(() => { // We only need it first time when message list appears if (areMessagesLoaded) { @@ -232,15 +234,17 @@ const MessageList: FC = ({ useOnChange(() => { memoFocusingIdRef.current = focusingId; + }, [focusingId]); - if (focusingId) { + useOnChange(() => { + if (isFocusing) { freezeForMedia(); freezeForReading(); } else { unfreezeForReading(); unfreezeForMedia(); } - }, [focusingId]); + }, [isFocusing]); const { observe: observeIntersectionForAnimatedStickers } = useIntersectionObserver({ rootRef: containerRef, @@ -541,7 +545,7 @@ const MessageList: FC = ({ containerRef={containerRef} className="messages-container" messageIds={messageIds || [lastMessage!.id]} - focusingId={focusingId} + isFocusing={isFocusing} loadMoreForwards={loadMoreForwards} loadMoreBackwards={loadMoreBackwards} isViewportNewest={isViewportNewest} diff --git a/src/components/middle/MessageScroll.tsx b/src/components/middle/MessageScroll.tsx index 16a78a48e..cee4a48f1 100644 --- a/src/components/middle/MessageScroll.tsx +++ b/src/components/middle/MessageScroll.tsx @@ -10,7 +10,7 @@ type OwnProps = { containerRef: MutableRefObject; className: string; messageIds: number[]; - focusingId?: number; + isFocusing: boolean; loadMoreForwards?: NoneToVoidFunction; loadMoreBackwards?: NoneToVoidFunction; isViewportNewest?: boolean; @@ -27,7 +27,7 @@ const MessageScroll: FC = ({ containerRef, className, messageIds, - focusingId, + isFocusing, loadMoreForwards, loadMoreBackwards, isViewportNewest, @@ -117,7 +117,6 @@ const MessageScroll: FC = ({ useOnIntersect(fabTriggerRef, observeIntersectionForNotch); - const isFocusing = Boolean(focusingId); useOnChange(() => { if (isFocusing) { freezeForLoadMore();