hippoz/cinny
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Improved performance of local timeline pagination

Browse source 
Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2021-12-04 19:34:22 +05:30
parent 25b7093302
commit 5b109c2b79
2 changed files with 9 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/app/organisms/room/RoomView.jsx
View file

@ -16,7 +16,6 @@ function RoomView({ roomTimeline, eventId }) {
// eslint-disable-next-line react/prop-types // eslint-disable-next-line react/prop-types
const { roomId } = roomTimeline; const { roomId } = roomTimeline;
console.log('----roomId changed');
return ( return (
<div className="room-view"> <div className="room-view">
<RoomViewHeader roomId={roomId} /> <RoomViewHeader roomId={roomId} />

14
src/app/organisms/room/RoomViewContent.jsx
View file

@ -213,6 +213,7 @@ class TimelineScroll extends EventEmitter {
return this.bottomMsg.offsetTop - scrollInfo.top; return this.bottomMsg.offsetTop - scrollInfo.top;
} }
// eslint-disable-next-line class-methods-use-this
_calcMaxEvents(scrollInfo) { _calcMaxEvents(scrollInfo) {
return Math.round(scrollInfo.viewHeight / SMALLEST_MSG_HEIGHT) * PAGES_COUNT; return Math.round(scrollInfo.viewHeight / SMALLEST_MSG_HEIGHT) * PAGES_COUNT;
} }
@ -402,7 +403,7 @@ function useEventArrive(roomTimeline) {
}; };
}, [roomTimeline]); }, [roomTimeline]);
useLayoutEffect(() => { useEffect(() => {
if (!roomTimeline.initialized) return; if (!roomTimeline.initialized) return;
if (timelineScroll.bottom < 16 && !roomTimeline.canPaginateForward()) { if (timelineScroll.bottom < 16 && !roomTimeline.canPaginateForward()) {
timelineScroll.scrollToBottom(); timelineScroll.scrollToBottom();
@ -415,8 +416,8 @@ function RoomViewContent({
}) { }) {
const timelineSVRef = useRef(null); const timelineSVRef = useRef(null);
const readEventStore = useStore(roomTimeline); const readEventStore = useStore(roomTimeline);
const [onLimitUpdate, forceUpdateLimit] = useForceUpdate();
const timelineInfo = useTimeline(roomTimeline, eventId); const timelineInfo = useTimeline(roomTimeline, eventId);
const [onLimitUpdate, forceUpdateLimit] = useForceUpdate();
const [paginateInfo, autoPaginate] = usePaginate(roomTimeline, forceUpdateLimit); const [paginateInfo, autoPaginate] = usePaginate(roomTimeline, forceUpdateLimit);
const handleScroll = useHandleScroll(roomTimeline, autoPaginate, viewEvent); const handleScroll = useHandleScroll(roomTimeline, autoPaginate, viewEvent);
useEventArrive(roomTimeline); useEventArrive(roomTimeline);
@ -433,8 +434,11 @@ function RoomViewContent({
useLayoutEffect(() => { useLayoutEffect(() => {
if (!roomTimeline.initialized) { if (!roomTimeline.initialized) {
timelineScroll = new TimelineScroll(timelineSVRef.current); timelineScroll = new TimelineScroll(timelineSVRef.current);
return undefined;
} }
});
useEffect(() => {
if (!roomTimeline.initialized) return undefined;
if (timeline.length > 0) { if (timeline.length > 0) {
if (focusEventIndex === null) timelineScroll.scrollToBottom(); if (focusEventIndex === null) timelineScroll.scrollToBottom();
@ -452,13 +456,13 @@ function RoomViewContent({
}; };
}, [timelineInfo]); }, [timelineInfo]);
useLayoutEffect(() => { useEffect(() => {
if (!roomTimeline.initialized) return; if (!roomTimeline.initialized) return;
timelineScroll.tryRestoringScroll(); timelineScroll.tryRestoringScroll();
autoPaginate(); autoPaginate();
}, [paginateInfo]); }, [paginateInfo]);
useLayoutEffect(() => { useEffect(() => {
if (!roomTimeline.initialized) return; if (!roomTimeline.initialized) return;
timelineScroll.tryRestoringScroll(); timelineScroll.tryRestoringScroll();
}, [onLimitUpdate]); }, [onLimitUpdate]);