feat: lazy load profile preview
This commit is contained in:
parent
b1f62ea6bc
commit
3b6b1458f2
@ -2,6 +2,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
padding: 5px 0;
|
padding: 5px 0;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
min-height: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-preview .pfp {
|
.profile-preview .pfp {
|
||||||
|
@ -5,6 +5,7 @@ import ProfileImage from "./ProfileImage";
|
|||||||
import FollowButton from "./FollowButton";
|
import FollowButton from "./FollowButton";
|
||||||
import useProfile from "../feed/ProfileFeed";
|
import useProfile from "../feed/ProfileFeed";
|
||||||
import { HexKey } from "../nostr";
|
import { HexKey } from "../nostr";
|
||||||
|
import { useInView } from "react-intersection-observer";
|
||||||
|
|
||||||
export interface ProfilePreviewProps {
|
export interface ProfilePreviewProps {
|
||||||
pubkey: HexKey,
|
pubkey: HexKey,
|
||||||
@ -16,18 +17,21 @@ export interface ProfilePreviewProps {
|
|||||||
export default function ProfilePreview(props: ProfilePreviewProps) {
|
export default function ProfilePreview(props: ProfilePreviewProps) {
|
||||||
const pubkey = props.pubkey;
|
const pubkey = props.pubkey;
|
||||||
const user = useProfile(pubkey)?.get(pubkey);
|
const user = useProfile(pubkey)?.get(pubkey);
|
||||||
|
const { ref, inView } = useInView({ triggerOnce: true });
|
||||||
const options = {
|
const options = {
|
||||||
about: true,
|
about: true,
|
||||||
...props.options
|
...props.options
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="profile-preview">
|
<div className="profile-preview" ref={ref}>
|
||||||
|
{inView && <>
|
||||||
<ProfileImage pubkey={pubkey} subHeader=
|
<ProfileImage pubkey={pubkey} subHeader=
|
||||||
{options.about ? <div className="f-ellipsis about">
|
{options.about ? <div className="f-ellipsis about">
|
||||||
{user?.about}
|
{user?.about}
|
||||||
</div> : undefined} />
|
</div> : undefined} />
|
||||||
{props.actions ?? <FollowButton pubkey={pubkey} className="ml5" />}
|
{props.actions ?? <FollowButton pubkey={pubkey} className="ml5" />}
|
||||||
|
</>}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
Loading…
Reference in New Issue
Block a user