Lazy load thread list timeline set (#8120)

src/components/structures/RightPanel.tsx

@@ -279,8 +279,6 @@ export default class RightPanel extends React.Component<IProps, IState> {
                     resizeNotifier={this.props.resizeNotifier}
                     onClose={this.onClose}
                     permalinkCreator={this.props.permalinkCreator}
-                    allThreadsTimelineSet={this.props.room.threadsTimelineSets[0]}
-                    myThreadsTimelineSet={this.props.room.threadsTimelineSets[1]}
                 />;
                 break;
 

src/components/structures/ThreadPanel.tsx

@@ -17,6 +17,7 @@ limitations under the License.
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import { EventTimelineSet } from 'matrix-js-sdk/src/models/event-timeline-set';
 import { Thread, ThreadEvent } from 'matrix-js-sdk/src/models/thread';
+import { Room } from 'matrix-js-sdk/src/models/room';
 
 import BaseCard from "../views/right_panel/BaseCard";
 import ResizeNotifier from '../../utils/ResizeNotifier';
@@ -37,8 +38,6 @@ interface IProps {
     onClose: () => void;
     resizeNotifier: ResizeNotifier;
     permalinkCreator: RoomPermalinkCreator;
-    allThreadsTimelineSet: EventTimelineSet;
-    myThreadsTimelineSet: EventTimelineSet;
 }
 
 export enum ThreadFilterType {
@@ -156,8 +155,6 @@ const ThreadPanel: React.FC<IProps> = ({
     roomId,
     onClose,
     permalinkCreator,
-    myThreadsTimelineSet,
-    allThreadsTimelineSet,
 }) => {
     const mxClient = useContext(MatrixClientContext);
     const roomContext = useContext(RoomContext);
@@ -165,13 +162,17 @@ const ThreadPanel: React.FC<IProps> = ({
     const card = useRef<HTMLDivElement>();
 
     const [filterOption, setFilterOption] = useState<ThreadFilterType>(ThreadFilterType.All);
-    const [room, setRoom] = useState(mxClient.getRoom(roomId));
+    const [room, setRoom] = useState<Room | null>(null);
     const [threadCount, setThreadCount] = useState<number>(0);
     const [timelineSet, setTimelineSet] = useState<EventTimelineSet | null>(null);
     const [narrow, setNarrow] = useState<boolean>(false);
 
     useEffect(() => {
-        setRoom(mxClient.getRoom(roomId));
+        const room = mxClient.getRoom(roomId);
+        room.createThreadsTimelineSets().then(() => {
+            setRoom(room);
+            setFilterOption(ThreadFilterType.All);
+        });
     }, [mxClient, roomId]);
 
     useEffect(() => {
@@ -183,24 +184,28 @@ const ThreadPanel: React.FC<IProps> = ({
             if (timelineSet) timelinePanel.current.refreshTimeline();
         }
 
-        setThreadCount(room.threads.size);
+        if (room) {
+            setThreadCount(room.threads.size);
 
-        room.on(ThreadEvent.New, onNewThread);
-        room.on(ThreadEvent.Update, refreshTimeline);
+            room.on(ThreadEvent.New, onNewThread);
+            room.on(ThreadEvent.Update, refreshTimeline);
+        }
 
         return () => {
-            room.removeListener(ThreadEvent.New, onNewThread);
-            room.removeListener(ThreadEvent.Update, refreshTimeline);
+            room?.removeListener(ThreadEvent.New, onNewThread);
+            room?.removeListener(ThreadEvent.Update, refreshTimeline);
         };
     }, [room, mxClient, timelineSet]);
 
     useEffect(() => {
-        if (filterOption === ThreadFilterType.My) {
-            setTimelineSet(myThreadsTimelineSet);
-        } else {
-            setTimelineSet(allThreadsTimelineSet);
+        if (room) {
+            if (filterOption === ThreadFilterType.My) {
+                setTimelineSet(room.threadsTimelineSets[1]);
+            } else {
+                setTimelineSet(room.threadsTimelineSets[0]);
+            }
         }
-    }, [filterOption, allThreadsTimelineSet, myThreadsTimelineSet]);
+    }, [room, filterOption]);
 
     useEffect(() => {
         if (timelineSet && !Thread.hasServerSideSupport) {