Poc

src/components/structures/ThreadView.tsx

@@ -20,7 +20,6 @@ import { Room } from 'matrix-js-sdk/src/models/room';
 import { IEventRelation, MatrixEvent } from 'matrix-js-sdk/src/models/event';
 import { TimelineWindow } from 'matrix-js-sdk/src/timeline-window';
 import { Direction } from 'matrix-js-sdk/src/models/event-timeline';
-import { IRelationsRequestOpts } from 'matrix-js-sdk/src/@types/requests';
 import { logger } from 'matrix-js-sdk/src/logger';
 import classNames from 'classnames';
 
@@ -195,9 +194,7 @@ export default class ThreadView extends React.Component<IProps, IState> {
                 thread,
             }, async () => {
                 thread.emit(ThreadEvent.ViewThread);
-                await thread.fetchInitialEvents();
-                this.nextBatch = thread.liveTimeline.getPaginationToken(Direction.Backward);
-                this.timelinePanel.current?.refreshTimeline();
+                this.timelinePanel.current?.refreshTimeline(this.props.initialEvent?.getId());
             });
         }
     };
@@ -242,35 +239,13 @@ export default class ThreadView extends React.Component<IProps, IState> {
         }
     };
 
-    private nextBatch: string;
-
     private onPaginationRequest = async (
         timelineWindow: TimelineWindow | null,
         direction = Direction.Backward,
         limit = 20,
     ): Promise<boolean> => {
-        if (!Thread.hasServerSideSupport) {
-            timelineWindow.extend(direction, limit);
-            return true;
-        }
-
-        const opts: IRelationsRequestOpts = {
-            limit,
-        };
-
-        if (this.nextBatch) {
-            opts.from = this.nextBatch;
-        }
-
-        const { nextBatch } = await this.state.thread.fetchEvents(opts);
-
-        this.nextBatch = nextBatch;
-
-        // Advances the marker on the TimelineWindow to define the correct
-        // window of events to display on screen
-        timelineWindow.extend(direction, limit);
-
-        return !!nextBatch;
+        timelineWindow.paginate(direction, limit);
+        return true;
     };
 
     private onFileDrop = (dataTransfer: DataTransfer) => {

src/components/structures/TimelinePanel.tsx

@@ -1408,8 +1408,13 @@ class TimelinePanel extends React.Component<IProps, IState> {
         // quite slow. So we detect that situation and shortcut straight to
         // calling _reloadEvents and updating the state.
 
-        const timeline = this.props.timelineSet.getTimelineForEvent(eventId);
-        if (timeline) {
+        let timeline: EventTimeline | null = null;
+        if (eventId) {
+            timeline = this.props.timelineSet.getTimelineForEvent(eventId);
+        } else {
+            timeline = this.props.timelineSet.getLiveTimeline();
+        }
+        if (timeline && timeline.getEvents().length) {
             // This is a hot-path optimization by skipping a promise tick
             // by repeating a no-op sync branch in TimelineSet.getTimelineForEvent & MatrixClient.getEventTimeline
             this.timelineWindow.load(eventId, INITIAL_SIZE); // in this branch this method will happen in sync time
@@ -1442,8 +1447,8 @@ class TimelinePanel extends React.Component<IProps, IState> {
     }
 
     // Force refresh the timeline before threads support pending events
-    public refreshTimeline(): void {
-        this.loadTimeline();
+    public refreshTimeline(eventId?: string): void {
+        this.loadTimeline(eventId, undefined, undefined, false);
         this.reloadEvents();
     }
 

src/components/views/rooms/ThreadSummary.tsx

@@ -94,7 +94,7 @@ export const ThreadMessagePreview = ({ thread, showDisplayname = false }: IPrevi
         await cli.decryptEventIfNeeded(lastReply);
         return MessagePreviewStore.instance.generatePreviewForEvent(lastReply);
     }, [lastReply, content]);
-    if (!preview) return null;
+    if (!preview || !lastReply) return null;
 
     return <>
         <MemberAvatar

src/utils/EventUtils.ts

@@ -238,8 +238,11 @@ export async function fetchInitialEvent(
     ) {
         const threadId = initialEvent.threadRootId;
         const room = client.getRoom(roomId);
+        const rootEvent = room.findEventById(threadId)
+            ?? new MatrixEvent(await client.fetchRoomEvent(roomId, threadId));
         try {
-            room.createThread(threadId, room.findEventById(threadId), [initialEvent], true);
+            const thread = room.createThread(threadId, rootEvent, [initialEvent], true);
+            initialEvent.setThread(thread);
         } catch (e) {
             logger.warn("Could not find root event: " + threadId);
         }