From 3b4848ba59591b58a95c61af210697149a858f57 Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@gmail.com>
Date: Sun, 28 Apr 2024 13:59:18 +0100
Subject: Reduce hovercard false positives, add them to display names and
 handles (#3739)

* Don't trigger hovercards on scroll

* Add display name / handle hovercards

* Increase hovercard delay
---
 src/components/ProfileHoverCard/index.web.tsx | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

(limited to 'src/components/ProfileHoverCard/index.web.tsx')

diff --git a/src/components/ProfileHoverCard/index.web.tsx b/src/components/ProfileHoverCard/index.web.tsx
index 2cd1228d8..d1b00d522 100644
--- a/src/components/ProfileHoverCard/index.web.tsx
+++ b/src/components/ProfileHoverCard/index.web.tsx
@@ -72,10 +72,10 @@ type Action =
   | 'unhovered-long-enough'
   | 'finished-animating-hide'
 
-const SHOW_DELAY = 400
+const SHOW_DELAY = 500
 const SHOW_DURATION = 300
 const HIDE_DELAY = 150
-const HIDE_DURATION = 150
+const HIDE_DURATION = 200
 
 export function ProfileHoverCardInner(props: ProfileHoverCardProps) {
   const {refs, floatingStyles} = useFloating({
@@ -244,12 +244,20 @@ export function ProfileHoverCardInner(props: ProfileHoverCardProps) {
     }
   }, [prefetchProfileQuery, props.did])
 
-  const onPointerEnterTarget = React.useCallback(() => {
+  const didFireHover = React.useRef(false)
+  const onPointerMoveTarget = React.useCallback(() => {
     prefetchIfNeeded()
-    dispatch('hovered-target')
+    // Conceptually we want something like onPointerEnter,
+    // but we want to ignore entering only due to scrolling.
+    // So instead we hover on the first onPointerMove.
+    if (!didFireHover.current) {
+      didFireHover.current = true
+      dispatch('hovered-target')
+    }
   }, [prefetchIfNeeded])
 
   const onPointerLeaveTarget = React.useCallback(() => {
+    didFireHover.current = false
     dispatch('unhovered-target')
   }, [])
 
@@ -280,7 +288,7 @@ export function ProfileHoverCardInner(props: ProfileHoverCardProps) {
   return (
     <div
       ref={refs.setReference}
-      onPointerEnter={onPointerEnterTarget}
+      onPointerMove={onPointerMoveTarget}
       onPointerLeave={onPointerLeaveTarget}
       onMouseUp={onPress}
       style={{
-- 
cgit 1.4.1

