perf: disable hover when scrolling on web and desktop

src/CONST.ts

@@ -2667,6 +2667,9 @@ const CONST = {
         HTTPS: 'https',
         PUSHER: 'pusher',
     },
+    EVENTS: {
+        SCROLLING: 'scrolling',
+    },
 } as const;
 
 export default CONST;

src/components/Hoverable/hoverablePropTypes.js

@@ -12,12 +12,16 @@ const propTypes = {
 
     /** Function that executes when the mouse leaves the children. */
     onHoverOut: PropTypes.func,
+
+    /** decides whether to handle the scroll behaviour to show hover once the scroll ends */
+    shouldHandleScroll: PropTypes.bool,
 };
 
 const defaultProps = {
     disabled: false,
     onHoverIn: () => {},
     onHoverOut: () => {},
+    shouldHandleScroll: false,
 };
 
 export {propTypes, defaultProps};

src/components/Hoverable/index.js

@@ -1,7 +1,9 @@
 import _ from 'underscore';
 import React, {Component} from 'react';
+import {DeviceEventEmitter} from 'react-native';
 import {propTypes, defaultProps} from './hoverablePropTypes';
 import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
+import CONST from '../../CONST';
 
 /**
  * It is necessary to create a Hoverable component instead of relying solely on Pressable support for hover state,
@@ -19,12 +21,37 @@ class Hoverable extends Component {
             isHovered: false,
         };
 
+        this.isHoveredRef = false;
+        this.isScrollingRef = false;
         this.wrapperView = null;
     }
 
     componentDidMount() {
         document.addEventListener('visibilitychange', this.handleVisibilityChange);
         document.addEventListener('mouseover', this.checkHover);
+
+        /**
+         * Only add the scrolling listener if the shouldHandleScroll prop is true
+         * and the scrollingListener is not already set.
+         */
+        if (!this.scrollingListener && this.props.shouldHandleScroll) {
+            this.scrollingListener = DeviceEventEmitter.addListener(CONST.EVENTS.SCROLLING, (scrolling) => {
+                /**
+                 * If user has stopped scrolling and the isHoveredRef is true, then we should update the hover state.
+                 */
+                if (!scrolling && this.isHoveredRef) {
+                    this.setState({isHovered: this.isHoveredRef}, this.props.onHoverIn);
+                } else if (scrolling && this.isHoveredRef) {
+                    /**
+                     * If the user has started scrolling and the isHoveredRef is true, then we should set the hover state to false.
+                     * This is to hide the existing hover and reaction bar.
+                     */
+                    this.isHoveredRef = false;
+                    this.setState({isHovered: false}, this.props.onHoverOut);
+                }
+                this.isScrollingRef = scrolling;
+            });
+        }
     }
 
     componentDidUpdate(prevProps) {
@@ -40,6 +67,9 @@ class Hoverable extends Component {
     componentWillUnmount() {
         document.removeEventListener('visibilitychange', this.handleVisibilityChange);
         document.removeEventListener('mouseover', this.checkHover);
+        if (this.scrollingListener) {
+            this.scrollingListener.remove();
+        }
     }
 
     /**
@@ -52,6 +82,17 @@ class Hoverable extends Component {
             return;
         }
 
+        /**
+         * Capture whther or not the user is hovering over the component.
+         * We will use this to determine if we should update the hover state when the user has stopped scrolling.
+         */
+        this.isHoveredRef = isHovered;
+
+        /**
+         * If the isScrollingRef is true, then the user is scrolling and we should not update the hover state.
+         */
+        if (this.isScrollingRef && this.props.shouldHandleScroll && !this.state.isHovered) return;
+
         if (isHovered !== this.state.isHovered) {
             this.setState({isHovered}, isHovered ? this.props.onHoverIn : this.props.onHoverOut);
         }

src/components/InvertedFlatList/index.js

@@ -1,9 +1,10 @@
 import React, {forwardRef} from 'react';
 import PropTypes from 'prop-types';
-import {FlatList, StyleSheet} from 'react-native';
+import {DeviceEventEmitter, FlatList, StyleSheet} from 'react-native';
 import _ from 'underscore';
 import BaseInvertedFlatList from './BaseInvertedFlatList';
 import styles from '../../styles/styles';
+import CONST from '../../CONST';
 
 const propTypes = {
     /** Passed via forwardRef so we can access the FlatList ref */
@@ -14,6 +15,9 @@ const propTypes = {
     /** Any additional styles to apply */
     // eslint-disable-next-line react/forbid-prop-types
     contentContainerStyle: PropTypes.any,
+
+    /** Same as for FlatList */
+    onScroll: PropTypes.func,
 };
 
 // This is adapted from https://codesandbox.io/s/react-native-dsyse
@@ -23,6 +27,14 @@ class InvertedFlatList extends React.Component {
         super(props);
 
         this.list = undefined;
+        this.lastScrollEvent = null;
+        this.scrollEndTimeout = null;
+        this.updateInProgress = false;
+        this.eventHandler = null;
+
+        this.handleScroll = this.handleScroll.bind(this);
+        this.onScroll = this.onScroll.bind(this);
+        this.onScrollEnd = this.onScrollEnd.bind(this);
     }
 
     componentDidMount() {
@@ -34,6 +46,76 @@ class InvertedFlatList extends React.Component {
         }
     }
 
+    componentWillUnmount() {
+        if (this.scrollEndTimeout) {
+            clearTimeout(this.scrollEndTimeout);
+        }
+
+        if (this.eventHandler) {
+            this.eventHandler.remove();
+        }
+    }
+
+    /**
+     * Emits when the scrolling is in progress. Also,
+     * invokes the onScroll callback function from props.
+     *
+     * @param {Event} event - The onScroll event from the FlatList
+     */
+    onScroll(event) {
+        this.props.onScroll(event);
+
+        if (!this.updateInProgress) {
+            this.updateInProgress = true;
+            this.eventHandler = DeviceEventEmitter.emit(CONST.EVENTS.SCROLLING, true);
+        }
+    }
+
+    /**
+     * Emits when the scrolling has ended.
+     */
+    onScrollEnd() {
+        this.eventHandler = DeviceEventEmitter.emit(CONST.EVENTS.SCROLLING, false);
+        this.updateInProgress = false;
+    }
+
+    /**
+     * Decides whether the scrolling has ended or not. If it has ended,
+     * then it calls the onScrollEnd function. Otherwise, it calls the
+     * onScroll function and pass the event to it.
+     *
+     * This is a temporary work around, since react-native-web doesn't
+     * support onScrollBeginDrag and onScrollEndDrag props for FlatList.
+     * More info:
+     * https://github.com/necolas/react-native-web/pull/1305
+     *
+     * This workaround is taken from below and refactored to fit our needs:
+     * https://github.com/necolas/react-native-web/issues/1021#issuecomment-984151185
+     *
+     * @param {Event} event - The onScroll event from the FlatList
+     */
+    handleScroll(event) {
+        this.onScroll(event);
+        const timestamp = Date.now();
+
+        if (this.scrollEndTimeout) {
+            clearTimeout(this.scrollEndTimeout);
+        }
+
+        if (this.lastScrollEvent) {
+            this.scrollEndTimeout = setTimeout(() => {
+                if (this.lastScrollEvent !== timestamp) {
+                    return;
+                }
+                // Scroll has ended
+                this.lastScrollEvent = null;
+                this.onScrollEnd();
+            }, 250);
+        }
+
+        this.lastScrollEvent = timestamp;
+    }
+
     render() {
         return (
             <BaseInvertedFlatList
@@ -43,6 +125,7 @@ class InvertedFlatList extends React.Component {
                 ref={(el) => (this.list = el)}
                 shouldMeasureItems
                 contentContainerStyle={StyleSheet.compose(this.props.contentContainerStyle, styles.justifyContentEnd)}
+                onScroll={this.handleScroll}
             />
         );
     }
@@ -51,6 +134,7 @@ class InvertedFlatList extends React.Component {
 InvertedFlatList.propTypes = propTypes;
 InvertedFlatList.defaultProps = {
     contentContainerStyle: {},
+    onScroll: () => {},
 };
 
 export default forwardRef((props, ref) => (

src/components/Tooltip/index.js

@@ -154,6 +154,7 @@ function Tooltip(props) {
                 <Hoverable
                     onHoverIn={showTooltip}
                     onHoverOut={hideTooltip}
+                    shouldHandleScroll={props.shouldHandleScroll}
                 >
                     {children}
                 </Hoverable>

src/components/Tooltip/tooltipPropTypes.js

@@ -28,6 +28,9 @@ const propTypes = {
 
     /** Unique key of renderTooltipContent to rerender the tooltip when one of the key changes */
     renderTooltipContentKey: PropTypes.arrayOf(PropTypes.string),
+
+    /** passes this down to Hoverable component to decide whether to handle the scroll behaviour to show hover once the scroll ends */
+    shouldHandleScroll: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -38,6 +41,7 @@ const defaultProps = {
     numberOfLines: CONST.TOOLTIP_MAX_LINES,
     renderTooltipContent: undefined,
     renderTooltipContentKey: [],
+    shouldHandleScroll: false,
 };
 
 export {propTypes, defaultProps};

src/components/UserDetailsTooltip/index.web.js

@@ -66,6 +66,7 @@ function UserDetailsTooltip(props) {
             shiftHorizontal={props.shiftHorizontal}
             renderTooltipContent={renderTooltipContent}
             renderTooltipContentKey={[userDisplayName, userLogin]}
+            shouldHandleScroll
         >
             {props.children}
         </Tooltip>

src/pages/home/report/ReportActionItem.js

@@ -570,7 +570,10 @@ function ReportActionItem(props) {
             withoutFocusOnSecondaryInteraction
             accessibilityLabel={props.translate('accessibilityHints.chatMessage')}
         >
-            <Hoverable disabled={Boolean(props.draftMessage)}>
+            <Hoverable
+                shouldHandleScroll
+                disabled={Boolean(props.draftMessage)}
+            >
                 {(hovered) => (
                     <View>
                         {props.shouldDisplayNewMarker && <UnreadActionIndicator reportActionID={props.action.reportActionID} />}