Merge pull request #280 from matrix-org/rav/gemini_no_relayout

Don't relayout scrollpanels every time something changes

package.json

@@ -35,7 +35,7 @@
     "q": "^1.4.1",
     "react": "^15.0.1",
     "react-dom": "^15.0.1",
-    "react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#4707b88",
+    "react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#6f5336c",
     "sanitize-html": "^1.11.1",
     "velocity-animate": "^1.2.3",
     "velocity-ui-pack": "^1.2.2"

src/components/structures/ScrollPanel.js

@@ -540,6 +540,7 @@ module.exports = React.createClass({
         // it's not obvious why we have a separate div and ol anyway.
         return (<GeminiScrollbar autoshow={true} ref="geminiPanel"
                 onScroll={this.onScroll} onResize={this.onResize}
+                relayoutOnUpdate={false}
                 className={this.props.className} style={this.props.style}>
                     <div className="mx_RoomView_messageListWrapper">
                         <ol ref="itemlist" className="mx_RoomView_MessageList" aria-live="polite">

src/components/structures/UserSettings.js

@@ -342,7 +342,9 @@ module.exports = React.createClass({
             <div className="mx_UserSettings">
                 <SimpleRoomHeader title="Settings" onCancelClick={ this.props.onClose }/>
 
-                <GeminiScrollbar className="mx_UserSettings_body" autoshow={true}>
+                <GeminiScrollbar className="mx_UserSettings_body"
+                                 relayoutOnUpdate={false}
+                                 autoshow={true}>
 
                 <h3>Profile</h3>
 

src/components/views/rooms/MemberList.js

@@ -521,7 +521,9 @@ module.exports = React.createClass({
         return (
             <div className="mx_MemberList">
                     {inviteMemberListSection}
-                    <GeminiScrollbar autoshow={true} className="mx_MemberList_joined mx_MemberList_outerWrapper">
+                    <GeminiScrollbar autoshow={true}
+                                     relayoutOnUpdate={false}
+                                     className="mx_MemberList_joined mx_MemberList_outerWrapper">
                         <TruncatedList className="mx_MemberList_wrapper" truncateAt={this.state.truncateAt}
                                 createOverflowElement={this._createOverflowTile}>
                             {this.makeMemberTiles('join', this.state.searchQuery)}

src/components/views/rooms/RoomList.js

@@ -193,9 +193,9 @@ module.exports = React.createClass({
             var me = room.getMember(MatrixClientPeg.get().credentials.userId);
             if (!me) return;
 
-            // console.log("room = " + room.name + ", me.membership = " + me.membership + 
+            // console.log("room = " + room.name + ", me.membership = " + me.membership +
             //             ", sender = " + me.events.member.getSender() +
-            //             ", target = " + me.events.member.getStateKey() + 
+            //             ", target = " + me.events.member.getStateKey() +
             //             ", prevMembership = " + me.events.member.getPrevContent().membership);
 
             if (me.membership == "invite") {
@@ -232,7 +232,7 @@ module.exports = React.createClass({
                         }
                     }
                     else {
-                        s.lists["im.vector.fake.recent"].push(room); 
+                        s.lists["im.vector.fake.recent"].push(room);
                     }
                 }
             }
@@ -270,7 +270,7 @@ module.exports = React.createClass({
     _repositionTooltip: function(e) {
         if (this.tooltip && this.tooltip.parentElement) {
             var scroll = ReactDOM.findDOMNode(this);
-            this.tooltip.style.top = (70 + scroll.parentElement.offsetTop + this.tooltip.parentElement.offsetTop - this._getScrollNode().scrollTop) + "px"; 
+            this.tooltip.style.top = (70 + scroll.parentElement.offsetTop + this.tooltip.parentElement.offsetTop - this._getScrollNode().scrollTop) + "px";
         }
     },
 
@@ -324,7 +324,9 @@ module.exports = React.createClass({
         var self = this;
 
         return (
-            <GeminiScrollbar className="mx_RoomList_scrollbar" autoshow={true} onScroll={ self._repositionTooltips } ref="gemscroll">
+            <GeminiScrollbar className="mx_RoomList_scrollbar"
+                 relayoutOnUpdate={false}
+                 autoshow={true} onScroll={ self._repositionTooltips } ref="gemscroll">
             <div className="mx_RoomList">
                 <RoomSubList list={ self.state.lists['im.vector.fake.invite'] }
                              label="Invites"

src/components/views/rooms/SearchableEntityList.js

@@ -162,9 +162,13 @@ var SearchableEntityList = React.createClass({
                     </div>
                 );
             }
-            list = <GeminiScrollbar autoshow={true} className="mx_SearchableEntityList_listWrapper">
-                        { list }
-                    </GeminiScrollbar>;
+            list = (
+                <GeminiScrollbar autoshow={true}
+                                 relayoutOnUpdate={false}
+                                 className="mx_SearchableEntityList_listWrapper">
+                    { list }
+                </GeminiScrollbar>
+            );
         }
 
         return (