From 3b6b1458f25bef3ee613c268d7bde59865059bc4 Mon Sep 17 00:00:00 2001
From: Kieran <kieran@harkin.me>
Date: Thu, 19 Jan 2023 15:21:13 +0000
Subject: [PATCH] feat: lazy load profile preview

---
 src/element/ProfilePreview.css |  1 +
 src/element/ProfilePreview.tsx | 16 ++++++++++------
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/element/ProfilePreview.css b/src/element/ProfilePreview.css
index 81524b46..8b98ed1f 100644
--- a/src/element/ProfilePreview.css
+++ b/src/element/ProfilePreview.css
@@ -2,6 +2,7 @@
     display: flex;
     padding: 5px 0;
     align-items: center;
+    min-height: 40px;
 }
 
 .profile-preview .pfp {
diff --git a/src/element/ProfilePreview.tsx b/src/element/ProfilePreview.tsx
index e91b6d1b..a209e871 100644
--- a/src/element/ProfilePreview.tsx
+++ b/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>
     )
 }
\ No newline at end of file