diff --git a/components/ProfilePopover.tsx b/components/ProfilePopover.tsx index 98a9ff3f..f584b832 100644 --- a/components/ProfilePopover.tsx +++ b/components/ProfilePopover.tsx @@ -2,7 +2,7 @@ import { Popover } from "./Popover"; import useSWR from "swr"; import { callRPC } from "app/api/rpc/client"; -import { useState } from "react"; +import { useRef, useState } from "react"; import { ProfileHeader } from "app/(home-pages)/p/[didOrHandle]/ProfileHeader"; import { SpeedyLink } from "./SpeedyLink"; import { Tooltip } from "./Tooltip"; @@ -12,9 +12,11 @@ export const ProfilePopover = (props: { didOrHandle: string; }) => { const [isOpen, setIsOpen] = useState(false); + let [isHovered, setIsHovered] = useState(false); + const hoverTimeout = useRef(null); const { data, isLoading } = useSWR( - isOpen ? ["profile-data", props.didOrHandle] : null, + isHovered ? ["profile-data", props.didOrHandle] : null, async () => { const response = await callRPC("get_profile_data", { didOrHandle: props.didOrHandle, @@ -26,7 +28,31 @@ export const ProfilePopover = (props: { return ( { + if (hoverTimeout.current) { + window.clearTimeout(hoverTimeout.current); + } + hoverTimeout.current = window.setTimeout(async () => { + setIsHovered(true); + }, 150); + }} + onPointerLeave={() => { + if (isHovered) return; + if (hoverTimeout.current) { + window.clearTimeout(hoverTimeout.current); + hoverTimeout.current = null; + } + setIsHovered(false); + }} + > + {props.trigger} + + } onOpenChange={setIsOpen} > {isLoading ? ( diff --git a/components/Tooltip.tsx b/components/Tooltip.tsx index f872d0d5..ce14776b 100644 --- a/components/Tooltip.tsx +++ b/components/Tooltip.tsx @@ -26,7 +26,7 @@ export const Tooltip = (props: { props.skipDelayDuration ? props.skipDelayDuration : 300 } > - + {props.trigger}