Avoid rerendering during Room unmount
might speed up room changing by a few milliseconds
This commit is contained in:
parent
0fd0b0c5f3
commit
ca0c697b6e
3 changed files with 30 additions and 0 deletions
|
@ -85,6 +85,12 @@ module.exports = React.createClass({
|
||||||
// opaque readreceipt info for each userId; used by ReadReceiptMarker
|
// opaque readreceipt info for each userId; used by ReadReceiptMarker
|
||||||
// to manage its animations
|
// to manage its animations
|
||||||
this._readReceiptMap = {};
|
this._readReceiptMap = {};
|
||||||
|
|
||||||
|
this._isMounted = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
componentWillUnmount: function() {
|
||||||
|
this._isMounted = false;
|
||||||
},
|
},
|
||||||
|
|
||||||
/* get the DOM node representing the given event */
|
/* get the DOM node representing the given event */
|
||||||
|
@ -201,6 +207,10 @@ module.exports = React.createClass({
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
_isUnmounting: function() {
|
||||||
|
return !this._isMounted;
|
||||||
|
},
|
||||||
|
|
||||||
_getEventTiles: function() {
|
_getEventTiles: function() {
|
||||||
var EventTile = sdk.getComponent('rooms.EventTile');
|
var EventTile = sdk.getComponent('rooms.EventTile');
|
||||||
|
|
||||||
|
@ -351,6 +361,7 @@ module.exports = React.createClass({
|
||||||
onWidgetLoad={this._onWidgetLoad}
|
onWidgetLoad={this._onWidgetLoad}
|
||||||
readReceipts={readReceipts}
|
readReceipts={readReceipts}
|
||||||
readReceiptMap={this._readReceiptMap}
|
readReceiptMap={this._readReceiptMap}
|
||||||
|
checkUnmounting={this._isUnmounting}
|
||||||
eventSendStatus={mxEv.status}
|
eventSendStatus={mxEv.status}
|
||||||
last={last} isSelectedEvent={highlight}/>
|
last={last} isSelectedEvent={highlight}/>
|
||||||
</li>
|
</li>
|
||||||
|
|
|
@ -116,6 +116,12 @@ module.exports = React.createClass({
|
||||||
*/
|
*/
|
||||||
readReceiptMap: React.PropTypes.object,
|
readReceiptMap: React.PropTypes.object,
|
||||||
|
|
||||||
|
/* A function which is used to check if the parent panel is being
|
||||||
|
* unmounted, to avoid unnecessary work. Should return true if we
|
||||||
|
* are being unmounted.
|
||||||
|
*/
|
||||||
|
checkUnmounting: React.PropTypes.func,
|
||||||
|
|
||||||
/* the status of this event - ie, mxEvent.status. Denormalised to here so
|
/* the status of this event - ie, mxEvent.status. Denormalised to here so
|
||||||
* that we can tell when it changes. */
|
* that we can tell when it changes. */
|
||||||
eventSendStatus: React.PropTypes.string,
|
eventSendStatus: React.PropTypes.string,
|
||||||
|
@ -261,6 +267,7 @@ module.exports = React.createClass({
|
||||||
<ReadReceiptMarker key={userId} member={member}
|
<ReadReceiptMarker key={userId} member={member}
|
||||||
leftOffset={left} hidden={hidden}
|
leftOffset={left} hidden={hidden}
|
||||||
readReceiptInfo={readReceiptInfo}
|
readReceiptInfo={readReceiptInfo}
|
||||||
|
checkUnmounting={this.props.checkUnmounting}
|
||||||
suppressAnimation={this._suppressReadReceiptAnimation}
|
suppressAnimation={this._suppressReadReceiptAnimation}
|
||||||
onClick={this.toggleAllReadAvatars}
|
onClick={this.toggleAllReadAvatars}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -53,6 +53,11 @@ module.exports = React.createClass({
|
||||||
// this room
|
// this room
|
||||||
readReceiptInfo: React.PropTypes.object,
|
readReceiptInfo: React.PropTypes.object,
|
||||||
|
|
||||||
|
// A function which is used to check if the parent panel is being
|
||||||
|
// unmounted, to avoid unnecessary work. Should return true if we
|
||||||
|
// are being unmounted.
|
||||||
|
checkUnmounting: React.PropTypes.func,
|
||||||
|
|
||||||
// callback for clicks on this RR
|
// callback for clicks on this RR
|
||||||
onClick: React.PropTypes.func,
|
onClick: React.PropTypes.func,
|
||||||
},
|
},
|
||||||
|
@ -81,6 +86,13 @@ module.exports = React.createClass({
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// checking the DOM properties can force a re-layout, which can be
|
||||||
|
// quite expensive; so if the parent messagepanel is being unmounted,
|
||||||
|
// then don't bother with this.
|
||||||
|
if (this.props.checkUnmounting && this.props.checkUnmounting()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
var avatarNode = ReactDOM.findDOMNode(this);
|
var avatarNode = ReactDOM.findDOMNode(this);
|
||||||
rrInfo.top = avatarNode.offsetTop;
|
rrInfo.top = avatarNode.offsetTop;
|
||||||
rrInfo.left = avatarNode.offsetLeft;
|
rrInfo.left = avatarNode.offsetLeft;
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue