feat: lazy load profile preview

src/element/ProfilePreview.css

@@ -2,6 +2,7 @@
     display: flex;
     padding: 5px 0;
     align-items: center;
+    min-height: 40px;
 }
 
 .profile-preview .pfp {

src/element/ProfilePreview.tsx

@@ -5,6 +5,7 @@ import ProfileImage from "./ProfileImage";
 import FollowButton from "./FollowButton";
 import useProfile from "../feed/ProfileFeed";
 import { HexKey } from "../nostr";
+import { useInView } from "react-intersection-observer";
 
 export interface ProfilePreviewProps {
     pubkey: HexKey,
@@ -16,18 +17,21 @@ export interface ProfilePreviewProps {
 export default function ProfilePreview(props: ProfilePreviewProps) {
     const pubkey = props.pubkey;
     const user = useProfile(pubkey)?.get(pubkey);
+    const { ref, inView } = useInView({ triggerOnce: true });
     const options = {
         about: true,
         ...props.options
     };
 
     return (
-        <div className="profile-preview">
-            <ProfileImage pubkey={pubkey} subHeader=
-                {options.about ? <div className="f-ellipsis about">
-                    {user?.about}
-                </div> : undefined} />
-            {props.actions ?? <FollowButton pubkey={pubkey} className="ml5" />}
+        <div className="profile-preview" ref={ref}>
+            {inView && <>
+                <ProfileImage pubkey={pubkey} subHeader=
+                    {options.about ? <div className="f-ellipsis about">
+                        {user?.about}
+                    </div> : undefined} />
+                {props.actions ?? <FollowButton pubkey={pubkey} className="ml5" />}
+            </>}
         </div>
     )
 }