A better solution avoiding to store the entire syncState

Author: rbondesson

apps/web/src/components/structures/TimelinePanel.tsx

@@ -24,7 +24,7 @@ import {
     type MatrixClient,
     type Relations,
     type MatrixError,
-    type SyncState,
+    SyncState,
     TimelineWindow,
     Thread,
     ThreadEvent,
@@ -192,9 +192,6 @@ interface IState {
     backPaginating: boolean;
     forwardPaginating: boolean;
 
-    // cache of matrixClient.getSyncState() (but from the 'sync' event)
-    clientSyncState: SyncState | null;
-
     // should the event tiles have twelve hour times
     isTwelveHour: boolean;
 
@@ -251,12 +248,17 @@ class TimelinePanel extends React.Component<IProps, IState> {
     // A map of <callId, LegacyCallEventGrouper>
     private callEventGroupers = new Map<string, LegacyCallEventGrouper>();
     private initialReadMarkerId: string | null = null;
+    private syncImpliesForwardPaginating: boolean;
 
     public constructor(props: IProps, context: React.ContextType<typeof RoomContext>) {
         super(props, context);
 
         debuglog("mounting");
 
+        this.syncImpliesForwardPaginating = TimelinePanel.isSyncForwardPaginating(
+            MatrixClientPeg.safeGet().getSyncState(),
+        );
+
         // XXX: we could track RM per TimelineSet rather than per Room.
         // but for now we just do it per room for simplicity.
         if (this.props.manageReadMarkers) {
@@ -278,7 +280,6 @@ class TimelinePanel extends React.Component<IProps, IState> {
             readMarkerEventId: this.initialReadMarkerId,
             backPaginating: false,
             forwardPaginating: false,
-            clientSyncState: MatrixClientPeg.safeGet().getSyncState(),
             isTwelveHour: SettingsStore.getValue("showTwelveHourTimestamps"),
             alwaysShowTimestamps: SettingsStore.getValue("alwaysShowTimestamps"),
             readMarkerInViewThresholdMs: SettingsStore.getValue("readMarkerInViewThresholdMs"),
@@ -897,16 +898,19 @@ class TimelinePanel extends React.Component<IProps, IState> {
         this.forceUpdate();
     };
 
-    // The SDK intentionally emits duplicate Sync events such as SYNCING -> SYNCING
-    // on each successful /sync so consumers can react to every sync loop. TimelinePanel
-    // only uses this state to drive loading UI, so duplicate values do not change what
-    // we render and would otherwise cause unnecessary MessagePanel re-renders.
     private onSync = (clientSyncState: SyncState, prevState: SyncState | null, data?: object): void => {
         if (this.unmounted) return;
-        if (clientSyncState === this.state.clientSyncState) return;
-        this.setState({ clientSyncState });
+        const nextSyncImpliesForwardPaginating = TimelinePanel.isSyncForwardPaginating(clientSyncState);
+        if (nextSyncImpliesForwardPaginating === this.syncImpliesForwardPaginating) return;
+
+        this.syncImpliesForwardPaginating = nextSyncImpliesForwardPaginating;
+        this.forceUpdate();
     };
 
+    private static isSyncForwardPaginating(syncState: SyncState | null): boolean {
+        return syncState === SyncState.Prepared || syncState === SyncState.Catchup;
+    }
+
     private readMarkerTimeout(readMarkerPosition: number | null): number {
         return readMarkerPosition === 0
             ? (this.context?.readMarkerInViewThresholdMs ?? this.state.readMarkerInViewThresholdMs)
@@ -1837,8 +1841,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
 
         // If the state is PREPARED or CATCHUP, we're still waiting for the js-sdk to sync with
         // the HS and fetch the latest events, so we are effectively forward paginating.
-        const forwardPaginating =
-            this.state.forwardPaginating || ["PREPARED", "CATCHUP"].includes(this.state.clientSyncState!);
+        const forwardPaginating = this.state.forwardPaginating || this.syncImpliesForwardPaginating;
         const events = this.state.events;
         return (
             <MessagePanel

apps/web/test/unit-tests/components/structures/TimelinePanel-test.tsx

@@ -485,7 +485,7 @@ describe("TimelinePanel", () => {
         });
     });
 
-    it("does not re-render MessagePanel for duplicate sync state events", async () => {
+    it("only re-renders when sync changes forward pagination state", async () => {
         const [client, room, events] = setupTestData();
         let timelinePanel: TimelinePanel | null = null;
 
@@ -501,14 +501,21 @@ describe("TimelinePanel", () => {
         await flushPromises();
         await waitFor(() => expect(timelinePanel).toBeTruthy());
 
-        const setStateSpy = jest.spyOn(timelinePanel!, "setState");
+        const forceUpdateSpy = jest.spyOn(timelinePanel!, "forceUpdate");
 
         await act(async () => {
             client.emit(ClientEvent.Sync, SyncState.Syncing, SyncState.Syncing);
             await flushPromises();
         });
 
-        expect(setStateSpy).not.toHaveBeenCalled();
+        expect(forceUpdateSpy).not.toHaveBeenCalled();
+
+        await act(async () => {
+            client.emit(ClientEvent.Sync, SyncState.Prepared, SyncState.Syncing);
+            await flushPromises();
+        });
+
+        expect(forceUpdateSpy).toHaveBeenCalledTimes(1);
     });
 
     describe("onRoomTimeline", () => {