mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-23 17:56:01 +03:00
Code Issues Projects Releases Packages Wiki Activity

wrap roomtiles in LazyRenderList to improve perf for big accounts

Browse source
This commit is contained in:
Bruno Windels 2019-02-13 14:51:09 +01:00
parent 0de2161a0d
commit 84163bed11
1 changed files with 47 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
src/components/structures/RoomSubList.js
View file

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