From 5b109c2b798231dab07a0593d49df09a7967f02d Mon Sep 17 00:00:00 2001 From: Ajay Bura Date: Sat, 4 Dec 2021 19:34:22 +0530 Subject: [PATCH] Improved performance of local timeline pagination Signed-off-by: Ajay Bura --- src/app/organisms/room/RoomView.jsx | 1 - src/app/organisms/room/RoomViewContent.jsx | 14 +++++++++----- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/app/organisms/room/RoomView.jsx b/src/app/organisms/room/RoomView.jsx index ba4ae09..21e675e 100644 --- a/src/app/organisms/room/RoomView.jsx +++ b/src/app/organisms/room/RoomView.jsx @@ -16,7 +16,6 @@ function RoomView({ roomTimeline, eventId }) { // eslint-disable-next-line react/prop-types const { roomId } = roomTimeline; - console.log('----roomId changed'); return (
diff --git a/src/app/organisms/room/RoomViewContent.jsx b/src/app/organisms/room/RoomViewContent.jsx index eba91f1..d3fce29 100644 --- a/src/app/organisms/room/RoomViewContent.jsx +++ b/src/app/organisms/room/RoomViewContent.jsx @@ -213,6 +213,7 @@ class TimelineScroll extends EventEmitter { return this.bottomMsg.offsetTop - scrollInfo.top; } + // eslint-disable-next-line class-methods-use-this _calcMaxEvents(scrollInfo) { return Math.round(scrollInfo.viewHeight / SMALLEST_MSG_HEIGHT) * PAGES_COUNT; } @@ -402,7 +403,7 @@ function useEventArrive(roomTimeline) { }; }, [roomTimeline]); - useLayoutEffect(() => { + useEffect(() => { if (!roomTimeline.initialized) return; if (timelineScroll.bottom < 16 && !roomTimeline.canPaginateForward()) { timelineScroll.scrollToBottom(); @@ -415,8 +416,8 @@ function RoomViewContent({ }) { const timelineSVRef = useRef(null); const readEventStore = useStore(roomTimeline); - const [onLimitUpdate, forceUpdateLimit] = useForceUpdate(); const timelineInfo = useTimeline(roomTimeline, eventId); + const [onLimitUpdate, forceUpdateLimit] = useForceUpdate(); const [paginateInfo, autoPaginate] = usePaginate(roomTimeline, forceUpdateLimit); const handleScroll = useHandleScroll(roomTimeline, autoPaginate, viewEvent); useEventArrive(roomTimeline); @@ -433,8 +434,11 @@ function RoomViewContent({ useLayoutEffect(() => { if (!roomTimeline.initialized) { timelineScroll = new TimelineScroll(timelineSVRef.current); - return undefined; } + }); + + useEffect(() => { + if (!roomTimeline.initialized) return undefined; if (timeline.length > 0) { if (focusEventIndex === null) timelineScroll.scrollToBottom(); @@ -452,13 +456,13 @@ function RoomViewContent({ }; }, [timelineInfo]); - useLayoutEffect(() => { + useEffect(() => { if (!roomTimeline.initialized) return; timelineScroll.tryRestoringScroll(); autoPaginate(); }, [paginateInfo]); - useLayoutEffect(() => { + useEffect(() => { if (!roomTimeline.initialized) return; timelineScroll.tryRestoringScroll(); }, [onLimitUpdate]);