wrap roomtiles in LazyRenderList to improve perf for big accounts

src/components/structures/RoomSubList.js

@@ -27,7 +27,9 @@ import IndicatorScrollbar from './IndicatorScrollbar';
 import { KeyCode } from '../../Keyboard';
 import { Group } from 'matrix-js-sdk';
 import PropTypes from 'prop-types';
-
+import RoomTile from "../views/rooms/RoomTile";
+import LazyRenderList from "../views/elements/LazyRenderList";
+import * as _ from "lodash";
 
 // turn this on for drop & drag console debugging galore
 const debug = false;
@@ -58,8 +60,20 @@ const RoomSubList = React.createClass({
     },
 
     getInitialState: function() {
+        // throttle updates to LazyRenderList
+        this._onScroll = _.throttle(
+            this._onScroll, 100,
+            {leading: false, trailing: true},
+        );
+        this._updateLazyRenderHeight = _.throttle(
+            this._updateLazyRenderHeight, 100,
+            {leading: false, trailing: true},
+        );
         return {
             hidden: this.props.startAsHidden || false,
+            // some values to get LazyRenderList starting
+            scrollerHeight: 800,
+            scrollTop: 0,
         };
     },
 
@@ -134,24 +148,21 @@ const RoomSubList = React.createClass({
         this.setState(this.state);
     },
 
-    makeRoomTiles: function() {
-        const RoomTile = sdk.getComponent("rooms.RoomTile");
-        return this.props.list.map((room, index) => {
-            return <RoomTile
-                room={room}
-                roomSubList={this}
-                tagName={this.props.tagName}
-                key={room.roomId}
-                collapsed={this.props.collapsed || false}
-                unread={Unread.doesRoomHaveUnreadMessages(room)}
-                highlight={room.getUnreadNotificationCount('highlight') > 0 || this.props.isInvite}
-                notificationCount={room.getUnreadNotificationCount()}
-                isInvite={this.props.isInvite}
-                refreshSubList={this._updateSubListCount}
-                incomingCall={null}
-                onClick={this.onRoomTileClick}
-            />;
-        });
+    makeRoomTile: function(room) {
+        return <RoomTile
+            room={room}
+            roomSubList={this}
+            tagName={this.props.tagName}
+            key={room.roomId}
+            collapsed={this.props.collapsed || false}
+            unread={Unread.doesRoomHaveUnreadMessages(room)}
+            highlight={room.getUnreadNotificationCount('highlight') > 0 || this.props.isInvite}
+            notificationCount={room.getUnreadNotificationCount()}
+            isInvite={this.props.isInvite}
+            refreshSubList={this._updateSubListCount}
+            incomingCall={null}
+            onClick={this.onRoomTileClick}
+        />;
     },
 
     _onNotifBadgeClick: function(e) {
@@ -270,6 +281,15 @@ const RoomSubList = React.createClass({
         if (this.refs.subList) {
             this.refs.subList.style.height = `${height}px`;
         }
+        this._updateLazyRenderHeight(height);
+    },
+
+    _updateLazyRenderHeight: function(height) {
+        this.setState({scrollerHeight: height});
+    },
+
+    _onScroll: function() {
+        this.setState({scrollTop: this.refs.scroller.getScrollTop()});
     },
 
     render: function() {
@@ -287,12 +307,16 @@ const RoomSubList = React.createClass({
                     {this._getHeaderJsx(isCollapsed)}
                 </div>;
             } else {
-                const tiles = this.makeRoomTiles();
-                tiles.push(...this.props.extraTiles);
+                const items = this.props.list.concat(this.props.extraTiles);
                 return <div ref="subList" className={subListClasses}>
                     {this._getHeaderJsx(isCollapsed)}
-                    <IndicatorScrollbar ref="scroller" className="mx_RoomSubList_scroll">
-                        { tiles }
+                    <IndicatorScrollbar ref="scroller" className="mx_RoomSubList_scroll" onScroll={ this._onScroll }>
+                        <LazyRenderList
+                            scrollTop={this.state.scrollTop }
+                            height={ this.state.scrollerHeight }
+                            renderItem={ this.makeRoomTile }
+                            itemHeight={34}
+                            items={items} />
                     </IndicatorScrollbar>
                 </div>;
             }