Merge pull request #2612 from matrix-org/bwindels/roomlistlag

Fix: roomlist reordering lags

src/components/structures/RoomSubList.js

@@ -145,6 +145,7 @@ const RoomSubList = React.createClass({
                 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}

src/components/structures/SearchBox.js

@@ -21,7 +21,7 @@ import { _t } from '../../languageHandler';
 import { KeyCode } from '../../Keyboard';
 import sdk from '../../index';
 import dis from '../../dispatcher';
-import rate_limited_func from '../../ratelimitedfunc';
+import { debounce } from 'lodash';
 import AccessibleButton from '../../components/views/elements/AccessibleButton';
 
 module.exports = React.createClass({
@@ -67,12 +67,9 @@ module.exports = React.createClass({
         this.onSearch();
     },
 
-    onSearch: new rate_limited_func(
-        function() {
-            this.props.onSearch(this.refs.search.value);
-        },
-        500,
-    ),
+    onSearch: debounce(function() {
+        this.props.onSearch(this.refs.search.value);
+    }, 200, {trailing: true}),
 
     _onKeyDown: function(ev) {
         switch (ev.keyCode) {

src/components/views/rooms/RoomList.js

@@ -17,6 +17,7 @@ limitations under the License.
 
 'use strict';
 import SettingsStore from "../../../settings/SettingsStore";
+import Timer from "../../../utils/Timer";
 
 const React = require("react");
 const ReactDOM = require("react-dom");
@@ -41,6 +42,7 @@ import {Resizer} from '../../../resizer';
 import {Layout, Distributor} from '../../../resizer/distributors/roomsublist2';
 const HIDE_CONFERENCE_CHANS = true;
 const STANDARD_TAGS_REGEX = /^(m\.(favourite|lowpriority|server_notice)|im\.vector\.fake\.(invite|recent|direct|archived))$/;
+const HOVER_MOVE_TIMEOUT = 1000;
 
 function labelForTagName(tagName) {
     if (tagName.startsWith('u.')) return tagName.slice(2);
@@ -73,6 +75,7 @@ module.exports = React.createClass({
 
     getInitialState: function() {
 
+        this._hoverClearTimer = null;
         this._subListRefs = {
             // key => RoomSubList ref
         };
@@ -95,7 +98,7 @@ module.exports = React.createClass({
             // update overflow indicators
             this._checkSubListsOverflow();
             // don't store height for collapsed sublists
-            if(!this.collapsedState[key]) {
+            if (!this.collapsedState[key]) {
                 this.subListSizes[key] = size;
                 window.localStorage.setItem("mx_roomlist_sizes",
                     JSON.stringify(this.subListSizes));
@@ -357,11 +360,32 @@ module.exports = React.createClass({
         this.forceUpdate();
     },
 
-    onMouseEnter: function(ev) {
-        this.setState({hover: true});
+    onMouseMove: async function(ev) {
+        if (!this._hoverClearTimer) {
+            this.setState({hover: true});
+            this._hoverClearTimer = new Timer(HOVER_MOVE_TIMEOUT);
+            this._hoverClearTimer.start();
+            let finished = true;
+            try {
+                await this._hoverClearTimer.finished();
+            } catch (err) {
+                finished = false;
+            }
+            this._hoverClearTimer = null;
+            if (finished) {
+                this.setState({hover: false});
+                this._delayedRefreshRoomList();
+            }
+        } else {
+            this._hoverClearTimer.restart();
+        }
     },
 
     onMouseLeave: function(ev) {
+        if (this._hoverClearTimer) {
+            this._hoverClearTimer.abort();
+            this._hoverClearTimer = null;
+        }
         this.setState({hover: false});
 
         // Refresh the room list just in case the user missed something.
@@ -774,7 +798,7 @@ module.exports = React.createClass({
 
         return (
             <div ref={this._collectResizeContainer} className="mx_RoomList"
-                 onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+                 onMouseMove={this.onMouseMove} onMouseLeave={this.onMouseLeave}>
                 { subListComponents }
             </div>
         );

src/components/views/rooms/RoomTile.js

@@ -108,13 +108,6 @@ module.exports = React.createClass({
         return statusUser._unstable_statusMessage;
     },
 
-    onRoomTimeline: function(ev, room) {
-        if (room !== this.props.room) return;
-        this.setState({
-            notificationCount: this.props.room.getUnreadNotificationCount(),
-        });
-    },
-
     onRoomName: function(room) {
         if (room !== this.props.room) return;
         this.setState({
@@ -159,7 +152,6 @@ module.exports = React.createClass({
 
     componentWillMount: function() {
         MatrixClientPeg.get().on("accountData", this.onAccountData);
-        MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline);
         MatrixClientPeg.get().on("Room.name", this.onRoomName);
         ActiveRoomObserver.addListener(this.props.room.roomId, this._onActiveRoomChange);
         this.dispatcherRef = dis.register(this.onAction);
@@ -179,7 +171,6 @@ module.exports = React.createClass({
         const cli = MatrixClientPeg.get();
         if (cli) {
             MatrixClientPeg.get().removeListener("accountData", this.onAccountData);
-            MatrixClientPeg.get().removeListener("Room.timeline", this.onRoomTimeline);
             MatrixClientPeg.get().removeListener("Room.name", this.onRoomName);
         }
         ActiveRoomObserver.removeListener(this.props.room.roomId, this._onActiveRoomChange);
@@ -306,7 +297,7 @@ module.exports = React.createClass({
 
     render: function() {
         const isInvite = this.props.room.getMyMembership() === "invite";
-        const notificationCount = this.state.notificationCount;
+        const notificationCount = this.props.notificationCount;
         // var highlightCount = this.props.room.getUnreadNotificationCount("highlight");
 
         const notifBadges = notificationCount > 0 && this._shouldShowNotifBadge();