message: wrap roomtiles in LazyRenderList to improve perf for big accounts
diff: @@ -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,9 +148,7 @@ const RoomSubList = React.createClass({
  this.setState(this.state);
  },
  - makeRoomTiles: function() {
  - const RoomTile = sdk.getComponent("rooms.RoomTile");
  - return this.props.list.map((room, index) => {
  + makeRoomTile: function(room) {
  return <RoomTile
  room={room}
  roomSubList={this}
  @@ -151,7 +163,6 @@ const RoomSubList = React.createClass({
  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>;
  }
  