nostr/iris-messenger
1
0
Fork 0
mirror of https://github.com/irislib/iris-messenger.git synced 2024-10-18 06:03:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

reduce profile layout shift by showing banner placeholder

Browse Source
This commit is contained in:
Martti Malmi 2023-08-23 17:24:59 +03:00
parent 0ecd07b4ab
commit aae6b69347
2 changed files with 15 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/js/nostr/hooks/useProfile.ts
View File

@ -10,7 +10,9 @@ export const useProfile = (pub: string) => {
if (!pub) return;
return SocialNetwork.getProfile(pub, (p) => {
p && setProfile(p);
if (p && p.created_at !== profile.created_at) {
setProfile(p);
}
});
}, [pub]);

21
src/js/views/profile/Profile.tsx
View File

@ -134,15 +134,18 @@ function Profile(props) {
return (
<View>
<Show when={banner && !blocked}>
<div
className="mb-4 h-48 bg-cover bg-center cursor-pointer"
style={{ backgroundImage: `url(${banner})` }}
onClick={() => setBannerModalOpen(true)}
></div>
<Show when={bannerModalOpen}>
<SimpleImageModal imageUrl={profile.banner} onClose={() => setBannerModalOpen(false)} />
</Show>
<div
className="mb-4 h-48 bg-cover bg-center cursor-pointer"
style={{
backgroundImage:
banner && !blocked
? `url(${banner})`
: 'linear-gradient(120deg, #010101 0%, #1f0f26 50%, #010101 100%)',
}}
onClick={() => banner && !blocked && setBannerModalOpen(true)}
></div>
<Show when={bannerModalOpen}>
<SimpleImageModal imageUrl={profile.banner} onClose={() => setBannerModalOpen(false)} />
</Show>
<div>
<ProfileHelmet