Limit the number of messages we load into a chat room when we switch to it (or more accurately, switch back to it).

skins/base/views/organisms/RoomView.js

@@ -38,11 +38,16 @@ module.exports = React.createClass({
     mixins: [RoomViewController],
 
     getMessageTiles: function() {
-        return this.state.room.timeline.map(function(mxEv) {
+        var ret = [];
-            return (
+        var count = 0;
+        for (var i = this.state.room.timeline.length-1; i >= 0 && count < this.state.messageCap; --i) {
+            var mxEv = this.state.room.timeline[i];
+            ret.unshift(
                 <li key={mxEv.getId()}><MessageTile mxEvent={mxEv} /></li>
             );
-        });
+            ++count;
+        }
+        return ret;
     },
 
     render: function() {

src/controllers/organisms/RoomView.js

@@ -21,11 +21,13 @@ var MatrixClientPeg = require("../../MatrixClientPeg");
 var dis = require("../../dispatcher");
 
 var PAGINATE_SIZE = 20;
+var INITIAL_SIZE = 100;
 
 module.exports = {
     getInitialState: function() {
         return {
-            room: MatrixClientPeg.get().getRoom(this.props.roomId)
+            room: MatrixClientPeg.get().getRoom(this.props.roomId),
+            messageCap: INITIAL_SIZE
         }
     },
 
@@ -113,18 +115,27 @@ module.exports = {
         var messageUl = this.refs.messageList.getDOMNode();
         if (messageUl.scrollTop < messageUl.clientHeight) {
             this.setState({paginating: true});
-            this.waiting_for_paginate = true;
 
             this.oldScrollHeight = messageUl.scrollHeight;
 
-            var that = this;
+            if (this.state.messageCap < this.state.room.timeline.length) {
-            MatrixClientPeg.get().scrollback(this.state.room, PAGINATE_SIZE).finally(function() {
+                this.waiting_for_paginate = false;
-                that.waiting_for_paginate = false;
+                var cap = Math.min(this.state.messageCap + PAGINATE_SIZE, this.state.room.timeline.length);
-                that.setState({
+                this.setState({messageCap: cap, paginating: true});
-                    room: MatrixClientPeg.get().getRoom(that.props.roomId)
+            } else {
+                this.waiting_for_paginate = true;
+                var cap = this.state.messageCap + PAGINATE_SIZE;
+                this.setState({messageCap: cap, paginating: true});
+                var that = this;
+                MatrixClientPeg.get().scrollback(this.state.room, PAGINATE_SIZE).finally(function() {
+                    that.waiting_for_paginate = false;
+                    that.setState({
+                        room: MatrixClientPeg.get().getRoom(that.props.roomId)
+                    });
+                    // wait and set paginating to false when the component updates
                 });
-                // wait and set paginating to false when the component updates
+            }
-            });
+
             return true;
         }
         return false;