Add feature to ResizeNotifier to maintain isResizing state and use it to skip onScroll handling

src/components/structures/GroupView.js

@@ -1335,7 +1335,7 @@ export default createReactClass({
                         </div>
                         <GroupHeaderButtons />
                     </div>
-                    <MainSplit panel={rightPanel}>
+                    <MainSplit panel={rightPanel} resizeNotifier={this.props.resizeNotifier}>
                         <AutoHideScrollbar className="mx_GroupView_body">
                             { this._getMembershipSection() }
                             { this._getGroupSection() }

src/components/structures/LoggedInView.tsx

@@ -257,6 +257,12 @@ class LoggedInView extends React.Component<IProps, IState> {
                 window.localStorage.setItem("mx_lhs_size", '' + size);
                 this.props.resizeNotifier.notifyLeftHandleResized();
             },
+            onResizeStart: () => {
+                this.props.resizeNotifier.startResizing();
+            },
+            onResizeStop: () => {
+                this.props.resizeNotifier.stopResizing();
+            },
         };
         const resizer = new Resizer(
             this._resizeContainer.current,
@@ -650,12 +656,13 @@ class LoggedInView extends React.Component<IProps, IState> {
                 break;
 
             case PageTypes.UserView:
-                pageElement = <UserView userId={this.props.currentUserId} />;
+                pageElement = <UserView userId={this.props.currentUserId} resizeNotifier={this.props.resizeNotifier} />;
                 break;
             case PageTypes.GroupView:
                 pageElement = <GroupView
                     groupId={this.props.currentGroupId}
                     isNew={this.props.currentGroupIsNew}
+                    resizeNotifier={this.props.resizeNotifier}
                 />;
                 break;
         }

src/components/structures/MainSplit.js

@@ -19,9 +19,18 @@ import React from 'react';
 import { Resizable } from 're-resizable';
 
 export default class MainSplit extends React.Component {
-    _onResized = (event, direction, refToElement, delta) => {
+    _onResizeStart = () => {
+        this.props.resizeNotifier.startResizing();
+    };
+
+    _onResize = () => {
+        this.props.resizeNotifier.notifyRightHandleResized();
+    };
+
+    _onResizeStop = (event, direction, refToElement, delta) => {
+        this.props.resizeNotifier.stopResizing();
         window.localStorage.setItem("mx_rhs_size", this._loadSidePanelSize().width + delta.width);
-    }
+    };
 
     _loadSidePanelSize() {
         let rhsSize = parseInt(window.localStorage.getItem("mx_rhs_size"), 10);
@@ -58,7 +67,9 @@ export default class MainSplit extends React.Component {
                     bottomLeft: false,
                     topLeft: false,
                 }}
-                onResizeStop={this._onResized}
+                onResizeStart={this._onResizeStart}
+                onResize={this._onResize}
+                onResizeStop={this._onResizeStop}
                 className="mx_RightPanel_ResizeWrapper"
                 handleClasses={{left: "mx_RightPanel_ResizeHandle"}}
             >

src/components/structures/RoomView.js

@@ -2096,10 +2096,7 @@ export default createReactClass({
                             onLeaveClick={(myMembership === "join") ? this.onLeaveClick : null}
                             e2eStatus={this.state.e2eStatus}
                         />
-                        <MainSplit
-                            panel={rightPanel}
-                            resizeNotifier={this.props.resizeNotifier}
-                        >
+                        <MainSplit panel={rightPanel} resizeNotifier={this.props.resizeNotifier}>
                             <div className={fadableSectionClasses}>
                                 {auxPanel}
                                 <div className={timelineClasses}>

src/components/structures/ScrollPanel.js

@@ -166,7 +166,7 @@ export default createReactClass({
         this._pendingFillRequests = {b: null, f: null};
 
         if (this.props.resizeNotifier) {
-            this.props.resizeNotifier.on("middlePanelResized", this.onResize);
+            this.props.resizeNotifier.on("middlePanelResizedNoisy", this.onResize);
         }
 
         this.resetScrollState();
@@ -196,11 +196,12 @@ export default createReactClass({
         this.unmounted = true;
 
         if (this.props.resizeNotifier) {
-            this.props.resizeNotifier.removeListener("middlePanelResized", this.onResize);
+            this.props.resizeNotifier.removeListener("middlePanelResizedNoisy", this.onResize);
         }
     },
 
     onScroll: function(ev) {
+        if (this.props.resizeNotifier.isResizing) return; // skip scroll events caused by resizing
         debuglog("onScroll", this._getScrollNode().scrollTop);
         this._scrollTimeout.restart();
         this._saveScrollState();

src/components/structures/UserView.js

@@ -80,7 +80,9 @@ export default class UserView extends React.Component {
             const RightPanel = sdk.getComponent('structures.RightPanel');
             const MainSplit = sdk.getComponent('structures.MainSplit');
             const panel = <RightPanel user={this.state.member} />;
-            return (<MainSplit panel={panel}><HomePage /></MainSplit>);
+            return (<MainSplit panel={panel} resizeNotifier={this.props.resizeNotifier}>
+                <HomePage />
+            </MainSplit>);
         } else {
             return (<div />);
         }

src/components/views/rooms/AppsDrawer.js

@@ -252,6 +252,7 @@ const PersistentVResizer = ({
         maxHeight={maxHeight}
         onResizeStart={() => {
             if (!resizing) setResizing(true);
+            resizeNotifier.startResizing();
         }}
         onResize={() => {
             resizeNotifier.notifyTimelineHeightChanged();
@@ -259,7 +260,7 @@ const PersistentVResizer = ({
         onResizeStop={(e, dir, ref, d) => {
             setHeight(height + d.height);
             if (resizing) setResizing(false);
-            resizeNotifier.notifyTimelineHeightChanged();
+            resizeNotifier.stopResizing();
         }}
         handleWrapperClass={handleWrapperClass}
         handleClasses={{bottom: handleClass}}

src/resizer/resizer.js

@@ -105,6 +105,9 @@ export default class Resizer {
         if (this.classNames.resizing) {
             this.container.classList.add(this.classNames.resizing);
         }
+        if (this.config.onResizeStart) {
+            this.config.onResizeStart();
+        }
 
         const {sizer, distributor} = this._createSizerAndDistributor(resizeHandle);
         distributor.start();
@@ -119,6 +122,9 @@ export default class Resizer {
             if (this.classNames.resizing) {
                 this.container.classList.remove(this.classNames.resizing);
             }
+            if (this.config.onResizeStop) {
+                this.config.onResizeStop();
+            }
             distributor.finish();
             body.removeEventListener("mouseup", finishResize, false);
             document.removeEventListener("mouseleave", finishResize, false);

src/utils/ResizeNotifier.js

@@ -31,6 +31,19 @@ export default class ResizeNotifier extends EventEmitter {
         // with default options, will call fn once at first call, and then every x ms
         // if there was another call in that timespan
         this._throttledMiddlePanel = throttle(() => this.emit("middlePanelResized"), 200);
+        this._isResizing = false;
+    }
+
+    get isResizing() {
+        return this._isResizing;
+    }
+
+    startResizing() {
+        this._isResizing = true;
+    }
+
+    stopResizing() {
+        this._isResizing = false;
     }
 
     _noisyMiddlePanel() {