Avoid TimelinePanel re-renders on duplicate sync state events

Author: rbondesson

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

@@ -897,8 +897,13 @@ 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 });
     };
 

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

@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import { render, waitFor, screen, act, cleanup } from "jest-matrix-react";
 import {
+    ClientEvent,
     ReceiptType,
     EventTimelineSet,
     EventType,
@@ -19,6 +20,7 @@ import {
     RoomEvent,
     RoomMember,
     RoomState,
+    SyncState,
     TimelineWindow,
     EventTimeline,
     FeatureSupport,
@@ -483,6 +485,32 @@ describe("TimelinePanel", () => {
         });
     });
 
+    it("does not re-render MessagePanel for duplicate sync state events", async () => {
+        const [client, room, events] = setupTestData();
+        let timelinePanel: TimelinePanel | null = null;
+
+        render(
+            <TimelinePanel
+                {...getProps(room, events)}
+                ref={(ref) => {
+                    timelinePanel = ref;
+                }}
+            />,
+            clientAndSDKContextRenderOptions(client, sdkContext),
+        );
+        await flushPromises();
+        await waitFor(() => expect(timelinePanel).toBeTruthy());
+
+        const setStateSpy = jest.spyOn(timelinePanel!, "setState");
+
+        await act(async () => {
+            client.emit(ClientEvent.Sync, SyncState.Syncing, SyncState.Syncing);
+            await flushPromises();
+        });
+
+        expect(setStateSpy).not.toHaveBeenCalled();
+    });
+
     describe("onRoomTimeline", () => {
         it("ignores events for other timelines", () => {
             const [client, room, events] = setupTestData();