Merge pull request #6772 from matrix-org/gsouquet/fix-18947

src/components/structures/ThreadView.tsx

@@ -52,6 +52,7 @@ interface IState {
 @replaceableComponent("structures.ThreadView")
 export default class ThreadView extends React.Component<IProps, IState> {
     private dispatcherRef: string;
+    private timelinePanelRef: React.RefObject<TimelinePanel> = React.createRef();
 
     constructor(props: IProps) {
         super(props);
@@ -112,10 +113,13 @@ export default class ThreadView extends React.Component<IProps, IState> {
 
     private updateThread = (thread?: Thread) => {
         if (thread) {
-            this.setState({ thread });
+            this.setState({
-        } else {
+                thread,
-            this.forceUpdate();
+                replyToEvent: thread.replyToEvent,
+            });
         }
+
+        this.timelinePanelRef.current?.refreshTimeline();
     };
 
     public render(): JSX.Element {
@@ -128,6 +132,7 @@ export default class ThreadView extends React.Component<IProps, IState> {
             >
                 { this.state.thread && (
                     <TimelinePanel
+                        ref={this.timelinePanelRef}
                         manageReadReceipts={false}
                         manageReadMarkers={false}
                         timelineSet={this.state?.thread?.timelineSet}

src/components/structures/TimelinePanel.tsx

@@ -1195,6 +1195,12 @@ class TimelinePanel extends React.Component<IProps, IState> {
         this.setState(this.getEvents());
     }
 
+    // Force refresh the timeline before threads support pending events
+    public refreshTimeline(): void {
+        this.loadTimeline();
+        this.reloadEvents();
+    }
+
     // get the list of events from the timeline window and the pending event list
     private getEvents(): Pick<IState, "events" | "liveEvents" | "firstVisibleEventIndex"> {
         const events: MatrixEvent[] = this.timelineWindow.getEvents();