Merge pull request #6771 from matrix-org/dbkr/debounce_read_marker_update

Debounce read marker update on scroll

src/components/structures/ScrollPanel.tsx

@@ -275,8 +275,8 @@ export default class ScrollPanel extends React.Component<IProps> {
         // fractional values (both too big and too small)
         // for scrollTop happen on certain browsers/platforms
         // when scrolled all the way down. E.g. Chrome 72 on debian.
-        // so check difference < 1;
-        return Math.abs(sn.scrollHeight - (sn.scrollTop + sn.clientHeight)) < 1;
+        // so check difference <= 1;
+        return Math.abs(sn.scrollHeight - (sn.scrollTop + sn.clientHeight)) <= 1;
     };
 
     // returns the vertical height in the given direction that can be removed from

src/components/structures/TimelinePanel.tsx

@@ -47,11 +47,14 @@ import { RoomPermalinkCreator } from "../../utils/permalinks/Permalinks";
 import Spinner from "../views/elements/Spinner";
 import EditorStateTransfer from '../../utils/EditorStateTransfer';
 import ErrorDialog from '../views/dialogs/ErrorDialog';
+import { debounce } from 'lodash';
 
 const PAGINATE_SIZE = 20;
 const INITIAL_SIZE = 20;
 const READ_RECEIPT_INTERVAL_MS = 500;
 
+const READ_MARKER_DEBOUNCE_MS = 100;
+
 const DEBUG = false;
 
 let debuglog = function(...s: any[]) {};
@@ -475,6 +478,20 @@ class TimelinePanel extends React.Component<IProps, IState> {
         }
 
         if (this.props.manageReadMarkers) {
+            this.doManageReadMarkers();
+        }
+    };
+
+    /*
+     * Debounced function to manage read markers because we don't need to
+     * do this on every tiny scroll update. It also sets state which causes
+     * a component update, which can in turn reset the scroll position, so
+     * it's important we allow the browser to scroll a bit before running this
+     * (hence trailing edge only and debounce rather than throttle because
+     * we really only need to update this once the user has finished scrolling,
+     * not periodically while they scroll).
+     */
+    private doManageReadMarkers = debounce(() => {
         const rmPosition = this.getReadMarkerPosition();
         // we hide the read marker when it first comes onto the screen, but if
         // it goes back off the top of the screen (presumably because the user
@@ -488,8 +505,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
         const timeout = this.readMarkerTimeout(rmPosition);
         // NO-OP when timeout already has set to the given value
         this.readMarkerActivityTimer.changeTimeout(timeout);
-        }
-    };
+    }, READ_MARKER_DEBOUNCE_MS, { leading: false, trailing: true });
 
     private onAction = (payload: ActionPayload): void => {
         switch (payload.action) {