Optimize chat loading

src/element/chat-message.tsx

@@ -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">

src/element/profile.tsx

@@ -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>
   );