quilling.dev
An ATproto social media client -- with an independent Appview.
wait a sec before showing card (#3516)
hailey.at
+13
-9
+13
-9
src/components/ProfileHoverCard/index.web.tsx
+13
-9
src/components/ProfileHoverCard/index.web.tsx
···
62
62
const targetHovered = React.useRef(false)
63
63
const cardHovered = React.useRef(false)
64
64
const targetClicked = React.useRef(false)
65
+
const showTimeout = React.useRef<NodeJS.Timeout>()
65
66
66
67
const onPointerEnterTarget = React.useCallback(() => {
67
-
targetHovered.current = true
68
+
showTimeout.current = setTimeout(async () => {
69
+
targetHovered.current = true
68
70
69
-
if (prefetchedProfile.current) {
70
-
// if we're navigating
71
-
if (targetClicked.current) return
72
-
setHovered(true)
73
-
} else {
74
-
prefetchProfileQuery(props.did).then(() => {
71
+
if (prefetchedProfile.current) {
72
+
// if we're navigating
73
+
if (targetClicked.current) return
74
+
setHovered(true)
75
+
} else {
76
+
await prefetchProfileQuery(props.did)
77
+
75
78
if (targetHovered.current) {
76
79
setHovered(true)
77
80
}
78
81
prefetchedProfile.current = true
79
-
})
80
-
}
82
+
}
83
+
}, 350)
81
84
}, [props.did, prefetchProfileQuery])
82
85
const onPointerEnterCard = React.useCallback(() => {
83
86
cardHovered.current = true
···
86
89
setHovered(true)
87
90
}, [])
88
91
const onPointerLeaveTarget = React.useCallback(() => {
92
+
clearTimeout(showTimeout.current)
89
93
targetHovered.current = false
90
94
setTimeout(() => {
91
95
if (cardHovered.current) return