perf: disable hover when scrolling on web and desktop

src/CONST.ts

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import Config from 'react-native-config';
 import * as KeyCommand from 'react-native-key-command';
+import { Platform } from 'react-native';
 import * as Url from './libs/Url';
 import SCREENS from './SCREENS';
 
@@ -2642,6 +2643,10 @@ const CONST = {
         HTTPS: 'https',
         PUSHER: 'pusher',
     },
+    EVENTS: {
+        SCROLLING: 'scrolling',
+    },
+    IS_DESKTOP_AND_WEB: Platform.OS === 'web' || Platform.OS === 'macos' || Platform.OS === 'windows',
 } as const;
 
 export default CONST;

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/BaseInvertedFlatList.js

@@ -2,9 +2,10 @@
 import _ from 'underscore';
 import React, {forwardRef, Component} from 'react';
 import PropTypes from 'prop-types';
-import {View, FlatList as NativeFlatlist} from 'react-native';
+import {View, FlatList as NativeFlatlist, DeviceEventEmitter} from 'react-native';
 import * as CollectionUtils from '../../libs/CollectionUtils';
 import FlatList from '../FlatList';
+import CONST from '../../CONST';
 
 const propTypes = {
     /** Same as FlatList can be any array of anything */
@@ -22,11 +23,15 @@ const propTypes = {
 
     /** Should we measure these items and call getItemLayout? */
     shouldMeasureItems: PropTypes.bool,
+
+    /** Same as for FlatList */
+    onScroll: PropTypes.func,
 };
 
 const defaultProps = {
     data: [],
     shouldMeasureItems: false,
+    onScroll: () => {},
 };
 
 class BaseInvertedFlatList extends Component {
@@ -35,12 +40,53 @@ class BaseInvertedFlatList extends Component {
 
         this.renderItem = this.renderItem.bind(this);
         this.getItemLayout = this.getItemLayout.bind(this);
+        this.handleScroll = this.handleScroll.bind(this);
+        this.onScroll = this.onScroll.bind(this);
+        this.onScrollEnd = this.onScrollEnd.bind(this);
 
         // Stores each item's computed height after it renders
         // once and is then referenced for the life of this component.
         // This is essential to getting FlatList inverted to work on web
         // and also enables more predictable scrolling on native platforms.
         this.sizeMap = {};
+
+        this.lastScrollEvent = null;
+        this.scrollEndTimeout = null;
+        this.updateInProgress = false;
+        this.eventHandler = null;
+    }
+
+    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;
     }
 
     /**
@@ -80,6 +126,43 @@ class BaseInvertedFlatList extends Component {
         };
     }
 
+    /**
+     * 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;
+      };
+
     /**
      * Measure item and cache the returned length (a.k.a. height)
      *
@@ -139,7 +222,7 @@ class BaseInvertedFlatList extends Component {
                 // We keep this property very low so that chat switching remains fast
                 maxToRenderPerBatch={1}
                 windowSize={15}
-
+                onScroll={CONST.IS_DESKTOP_AND_WEB ? this.handleScroll : this.props.onScroll}
                 // Commenting the line below as it breaks the unread indicator test
                 // we will look at fixing/reusing this after RN v0.72
                 // maintainVisibleContentPosition={{minIndexForVisible: 0, autoscrollToTopThreshold: 0}}

src/components/Tooltip/index.js

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

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

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