Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into t3chguy/fix/12740

 Conflicts:

	src/components/views/rooms/EditMessageComposer.js

	src/components/views/rooms/SendMessageComposer.js

src/components/structures/TimelinePanel.js

@@ -38,6 +38,7 @@ import {haveTileForEvent} from "../views/rooms/EventTile";
 import {UIFeature} from "../../settings/UIFeature";
 import {objectHasDiff} from "../../utils/objects";
 import {replaceableComponent} from "../../utils/replaceableComponent";
+import { arrayFastClone } from "../../utils/arrays";
 
 const PAGINATE_SIZE = 20;
 const INITIAL_SIZE = 20;
@@ -68,6 +69,7 @@ class TimelinePanel extends React.Component {
         showReadReceipts: PropTypes.bool,
         // Enable managing RRs and RMs. These require the timelineSet to have a room.
         manageReadReceipts: PropTypes.bool,
+        sendReadReceiptOnLoad: PropTypes.bool,
         manageReadMarkers: PropTypes.bool,
 
         // true to give the component a 'display: none' style.
@@ -126,6 +128,7 @@ class TimelinePanel extends React.Component {
         // event tile heights. (See _unpaginateEvents)
         timelineCap: Number.MAX_VALUE,
         className: 'mx_RoomView_messagePanel',
+        sendReadReceiptOnLoad: true,
     };
 
     constructor(props) {
@@ -806,8 +809,10 @@ class TimelinePanel extends React.Component {
             return;
         }
         const lastDisplayedEvent = this.state.events[lastDisplayedIndex];
-        this._setReadMarker(lastDisplayedEvent.getId(),
-                            lastDisplayedEvent.getTs());
+        this._setReadMarker(
+            lastDisplayedEvent.getId(),
+            lastDisplayedEvent.getTs(),
+        );
 
         // the read-marker should become invisible, so that if the user scrolls
         // down, they don't see it.
@@ -893,7 +898,7 @@ class TimelinePanel extends React.Component {
             // The messagepanel knows where the RM is, so we must have loaded
             // the relevant event.
             this._messagePanel.current.scrollToEvent(this.state.readMarkerEventId,
-                                                 0, 1/3);
+                0, 1/3);
             return;
         }
 
@@ -1065,12 +1070,14 @@ class TimelinePanel extends React.Component {
                 }
                 if (eventId) {
                     this._messagePanel.current.scrollToEvent(eventId, pixelOffset,
-                                                         offsetBase);
+                        offsetBase);
                 } else {
                     this._messagePanel.current.scrollToBottom();
                 }
 
-                this.sendReadReceipt();
+                if (this.props.sendReadReceiptOnLoad) {
+                    this.sendReadReceipt();
+                }
             });
         };
 
@@ -1156,6 +1163,17 @@ class TimelinePanel extends React.Component {
     // get the list of events from the timeline window and the pending event list
     _getEvents() {
         const events = this._timelineWindow.getEvents();
+
+        // `arrayFastClone` performs a shallow copy of the array
+        // we want the last event to be decrypted first but displayed last
+        // `reverse` is destructive and unfortunately mutates the "events" array
+        arrayFastClone(events)
+            .reverse()
+            .forEach(event => {
+                const client = MatrixClientPeg.get();
+                client.decryptEventIfNeeded(event);
+            });
+
         const firstVisibleEventIndex = this._checkForPreJoinUISI(events);
 
         // Hold onto the live events separately. The read receipt and read marker
@@ -1439,8 +1457,8 @@ class TimelinePanel extends React.Component {
             ['PREPARED', 'CATCHUP'].includes(this.state.clientSyncState)
         );
         const events = this.state.firstVisibleEventIndex
-              ? this.state.events.slice(this.state.firstVisibleEventIndex)
-              : this.state.events;
+            ? this.state.events.slice(this.state.firstVisibleEventIndex)
+            : this.state.events;
         return (
             <MessagePanel
                 ref={this._messagePanel}