forked from Kieran/zap.stream
Optimize chat loading
This commit is contained in:
parent
672f1dd077
commit
67f69299a5
@ -11,7 +11,7 @@ import { Profile } from "./profile";
|
||||
import { Text } from "./text";
|
||||
import { SendZapsDialog } from "./send-zap";
|
||||
import { findTag } from "../utils";
|
||||
|
||||
import { useInView } from "react-intersection-observer";
|
||||
|
||||
interface Emoji {
|
||||
id: string;
|
||||
@ -38,12 +38,16 @@ export function ChatMessage({
|
||||
reactions: readonly NostrEvent[];
|
||||
}) {
|
||||
const ref = useRef(null);
|
||||
const { inView } = useInView({
|
||||
root: ref.current,
|
||||
triggerOnce: true
|
||||
});
|
||||
const emojiRef = useRef(null);
|
||||
const isTablet = useMediaQuery("(max-width: 1020px)");
|
||||
const isHovering = useHover(ref);
|
||||
const [showZapDialog, setShowZapDialog] = useState(false);
|
||||
const [showEmojiPicker, setShowEmojiPicker] = useState(false);
|
||||
const profile = useUserProfile(System, ev.pubkey);
|
||||
const profile = useUserProfile(System, inView ? ev.pubkey : undefined);
|
||||
const zapTarget = profile?.lud16 ?? profile?.lud06;
|
||||
const zaps = useMemo(() => {
|
||||
return reactions.filter(a => a.kind === EventKind.ZapReceipt)
|
||||
@ -102,7 +106,7 @@ export function ChatMessage({
|
||||
ref={ref}
|
||||
onClick={() => setShowZapDialog(true)}
|
||||
>
|
||||
<Profile pubkey={ev.pubkey} />
|
||||
<Profile pubkey={ev.pubkey} profile={profile} />
|
||||
<Text content={ev.content} tags={ev.tags} />
|
||||
{(hasReactions || hasZaps) && (
|
||||
<div className="message-reactions">
|
||||
|
@ -5,6 +5,7 @@ import { UserMetadata } from "@snort/system";
|
||||
import { hexToBech32 } from "@snort/shared";
|
||||
import { Icon } from "element/icon";
|
||||
import { System } from "index";
|
||||
import { useInView } from "react-intersection-observer";
|
||||
|
||||
export interface ProfileOptions {
|
||||
showName?: boolean;
|
||||
@ -29,12 +30,15 @@ export function Profile({
|
||||
pubkey,
|
||||
avatarClassname,
|
||||
options,
|
||||
profile,
|
||||
}: {
|
||||
pubkey: string;
|
||||
avatarClassname?: string;
|
||||
options?: ProfileOptions;
|
||||
profile?: UserMetadata
|
||||
}) {
|
||||
const profile = useUserProfile(System, pubkey);
|
||||
const { inView, ref } = useInView();
|
||||
profile ??= useUserProfile(System, inView ? pubkey : undefined);
|
||||
const showAvatar = options?.showAvatar ?? true;
|
||||
const showName = options?.showName ?? true;
|
||||
|
||||
@ -61,9 +65,9 @@ export function Profile({
|
||||
);
|
||||
|
||||
return pubkey === "anon" ? (
|
||||
<div className="profile">{content}</div>
|
||||
<div className="profile" ref={ref}>{content}</div>
|
||||
) : (
|
||||
<Link to={`/p/${hexToBech32("npub", pubkey)}`} className="profile">
|
||||
<Link to={`/p/${hexToBech32("npub", pubkey)}`} className="profile" ref={ref}>
|
||||
{content}
|
||||
</Link>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user