Improved performance of local timeline pagination

Signed-off-by: Ajay Bura <ajbura@gmail.com>

diff --git a/src/app/organisms/room/RoomView.jsx b/src/app/organisms/room/RoomView.jsx
index ba4ae09d001ecffda997b3e27c2f393385e639f1..21e675ed081ce97d8ed64ff033c5b7d6f83af4b5 100644 (file)
--- 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 (
     <div className="room-view">
       <RoomViewHeader roomId={roomId} />

diff --git a/src/app/organisms/room/RoomViewContent.jsx b/src/app/organisms/room/RoomViewContent.jsx
index eba91f14142c226b7298449bfe03aa6bd0ec342a..d3fce29b2a5a39fc4b9a5abfbd3c379d105a30c9 100644 (file)
--- 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]);