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

[Perf] Message List: Avoid layout effect during animation

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-05-28 14:32:31 +02:00
parent 577d055d68
commit f42c013efa
1 changed files with 10 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/middle/MessageList.tsx
View File

@ -422,6 +422,16 @@ const MessageList: FC<OwnProps & StateProps> = ({
const prevContainerHeight = prevContainerHeightRef.current; const prevContainerHeight = prevContainerHeightRef.current;
prevContainerHeightRef.current = containerHeight; prevContainerHeightRef.current = containerHeight;
// Skip initial resize observer callback
if (
messageIds === prevMessageIds
&& isViewportNewest === prevIsViewportNewest
&& containerHeight !== prevContainerHeight
&& prevContainerHeight === undefined
) {
return;
}
const container = containerRef.current!; const container = containerRef.current!;
listItemElementsRef.current = Array.from(container.querySelectorAll<HTMLDivElement>('.message-list-item')); listItemElementsRef.current = Array.from(container.querySelectorAll<HTMLDivElement>('.message-list-item'));
const lastItemElement = listItemElementsRef.current[listItemElementsRef.current.length - 1]; const lastItemElement = listItemElementsRef.current[listItemElementsRef.current.length - 1];