fix(timeline): refresh rows after decryption

Author: eleboucher

src/app/hooks/timeline/useTimelineSync.test.tsx

@@ -992,6 +992,32 @@ describe('live-arrive edge cases', () => {
 
     expect(result.current.timeline).not.toBe(before);
   });
+
+  it('re-renders when an event finishes decrypting', async () => {
+    const { room } = createRoom();
+    const { result } = renderSyncHook(room);
+    const before = result.current.timeline;
+
+    await act(async () => {
+      mxEmitter.emit(MatrixEventEvent.Decrypted, { getRoomId: () => room.roomId });
+      await Promise.resolve();
+    });
+
+    expect(result.current.timeline).not.toBe(before);
+  });
+
+  it('ignores decryption of an event in another room', async () => {
+    const { room } = createRoom();
+    const { result } = renderSyncHook(room);
+    const before = result.current.timeline;
+
+    await act(async () => {
+      mxEmitter.emit(MatrixEventEvent.Decrypted, { getRoomId: () => '!other:test' });
+      await Promise.resolve();
+    });
+
+    expect(result.current.timeline).toBe(before);
+  });
 });
 
 describe('event jump recovery', () => {

src/app/hooks/timeline/useTimelineSync.ts

@@ -580,6 +580,20 @@ export function useTimelineSync({
 
   useMatrixEvent(room, RoomEvent.LocalEchoUpdated, handleLocalEchoUpdated);
 
+  const handleDecrypted = useCallback(
+    (mEvent: MatrixEvent) => {
+      if (mEvent.getRoomId() !== room.roomId) return;
+      setTimeline((ct) => ({ ...ct }));
+    },
+    [room, setTimeline]
+  );
+
+  useMatrixEvent(
+    typeof (mx as Partial<Pick<MatrixClient, 'on'>>).on === 'function' ? mx : undefined,
+    MatrixEventEvent.Decrypted,
+    handleDecrypted
+  );
+
   useLiveTimelineRefresh(
     room,
     useCallback(() => {