leaflet.pub
a tool for shared writing and social publishing
prefetch profile data on hover
cozylittle.house
+30
-4
+29
-3
components/ProfilePopover.tsx
+29
-3
components/ProfilePopover.tsx
···
2
2
import { Popover } from "./Popover";
3
3
import useSWR from "swr";
4
4
import { callRPC } from "app/api/rpc/client";
5
-
import { useState } from "react";
5
+
import { useRef, useState } from "react";
6
6
import { ProfileHeader } from "app/(home-pages)/p/[didOrHandle]/ProfileHeader";
7
7
import { SpeedyLink } from "./SpeedyLink";
8
8
import { Tooltip } from "./Tooltip";
···
12
12
didOrHandle: string;
13
13
}) => {
14
14
const [isOpen, setIsOpen] = useState(false);
15
+
let [isHovered, setIsHovered] = useState(false);
16
+
const hoverTimeout = useRef<null | number>(null);
15
17
16
18
const { data, isLoading } = useSWR(
17
-
isOpen ? ["profile-data", props.didOrHandle] : null,
19
+
isHovered ? ["profile-data", props.didOrHandle] : null,
18
20
async () => {
19
21
const response = await callRPC("get_profile_data", {
20
22
didOrHandle: props.didOrHandle,
···
26
28
return (
27
29
<Tooltip
28
30
className="max-w-sm p-0! text-center"
29
-
trigger={props.trigger}
31
+
trigger={
32
+
<a
33
+
className="no-underline"
34
+
href={`https://leaflet.pub/p/${props.didOrHandle}`}
35
+
target="_blank"
36
+
onPointerEnter={(e) => {
37
+
if (hoverTimeout.current) {
38
+
window.clearTimeout(hoverTimeout.current);
39
+
}
40
+
hoverTimeout.current = window.setTimeout(async () => {
41
+
setIsHovered(true);
42
+
}, 150);
43
+
}}
44
+
onPointerLeave={() => {
45
+
if (isHovered) return;
46
+
if (hoverTimeout.current) {
47
+
window.clearTimeout(hoverTimeout.current);
48
+
hoverTimeout.current = null;
49
+
}
50
+
setIsHovered(false);
51
+
}}
52
+
>
53
+
{props.trigger}
54
+
</a>
55
+
}
30
56
onOpenChange={setIsOpen}
31
57
>
32
58
{isLoading ? (
+1
-1
components/Tooltip.tsx
+1
-1
components/Tooltip.tsx
···
26
26
props.skipDelayDuration ? props.skipDelayDuration : 300
27
27
}
28
28
>
29
-
<RadixTooltip.Root onOpenChange={props.onOpenChange}>
29
+
<RadixTooltip.Root onOpenChange={props.onOpenChange} open={props.open}>
30
30
<RadixTooltip.Trigger disabled={props.disabled} asChild={props.asChild}>
31
31
{props.trigger}
32
32
</RadixTooltip.Trigger>