wait a sec before showing card (#3516)

src/components/ProfileHoverCard/index.web.tsx

@@ -62,8 +62,10 @@ export function ProfileHoverCardInner(props: ProfileHoverCardProps) {
   const targetHovered = React.useRef(false)
   const cardHovered = React.useRef(false)
   const targetClicked = React.useRef(false)
+  const showTimeout = React.useRef<NodeJS.Timeout>()
 
   const onPointerEnterTarget = React.useCallback(() => {
+    showTimeout.current = setTimeout(async () => {
       targetHovered.current = true
 
       if (prefetchedProfile.current) {
@@ -71,13 +73,14 @@ export function ProfileHoverCardInner(props: ProfileHoverCardProps) {
         if (targetClicked.current) return
         setHovered(true)
       } else {
-      prefetchProfileQuery(props.did).then(() => {
+        await prefetchProfileQuery(props.did)
+
         if (targetHovered.current) {
           setHovered(true)
         }
         prefetchedProfile.current = true
-      })
       }
+    }, 350)
   }, [props.did, prefetchProfileQuery])
   const onPointerEnterCard = React.useCallback(() => {
     cardHovered.current = true
@@ -86,6 +89,7 @@ export function ProfileHoverCardInner(props: ProfileHoverCardProps) {
     setHovered(true)
   }, [])
   const onPointerLeaveTarget = React.useCallback(() => {
+    clearTimeout(showTimeout.current)
     targetHovered.current = false
     setTimeout(() => {
       if (cardHovered.current) return