Skip to content

Commit

Permalink
Fix profile header flicker on load
Browse files Browse the repository at this point in the history
  • Loading branch information
@moysa
moysa committed Oct 3, 2023
1 parent f8de263 commit 96769f6
Show file tree
Hide file tree
Showing 3 changed files with 144 additions and 122 deletions.
8 changes: 8 additions & 0 deletions src/contexts/ProfileContext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,7 @@ export type ProfileContextStore = {
addContact: (pubkey: string, source: PrimalUser[]) => void,
fetchZapList: (pubkey: string | undefined) => void,
fetchNextZapsPage: () => void,
resetProfile: () => void,
}
}

Expand Down Expand Up @@ -877,6 +878,12 @@ export const ProfileProvider = (props: { children: ContextChildren }) => {
}
}

const resetProfile = () => {
updateStore('userProfile', () => undefined);
updateStore('isFetching', () => false);
updateStore('userStats', reconcile(emptyStats));
};

const refreshNotes = () => {
};

Expand Down Expand Up @@ -1120,6 +1127,7 @@ export const ProfileProvider = (props: { children: ContextChildren }) => {
fetchZapList,
fetchNextZapsPage,
clearZaps,
resetProfile,
},
});

Expand Down
7 changes: 7 additions & 0 deletions src/pages/Profile.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,13 @@
// min-height: 474px;
}

.emptyHeader {
position: relative;
background-color: var(--background-card);
padding-bottom: 4px;
height: 466px;
}

.banner {
width: 100%;
height: 214px;
Expand Down
251 changes: 129 additions & 122 deletions src/pages/Profile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import {
createSignal,
For,
Match,
onCleanup,
onMount,
Resource,
Show,
Switch
Expand Down Expand Up @@ -456,17 +458,21 @@ const Profile: Component = () => {
<Search />
</Wormhole>

<div id="central_header" class={styles.fullHeader}>
<div id="profile_banner" class={`${styles.banner} ${flagBannerForWarning()}`}>
<Show
when={profile?.userProfile?.banner}
fallback={<div class={styles.bannerPlaceholder}></div>}
>
<img src={banner()} onerror={imgError}/>
</Show>
</div>
<Show
when={profile?.userProfile && profile.userProfile.pubkey === getHex()}
fallback={<div id="central_header" class={styles.emptyHeader}></div>}
>

<div id="central_header" class={styles.fullHeader}>
<div id="profile_banner" class={`${styles.banner} ${flagBannerForWarning()}`}>
<Show
when={profile?.userProfile?.banner}
fallback={<div class={styles.bannerPlaceholder}></div>}
>
<img src={banner()} onerror={imgError}/>
</Show>
</div>

<Show when={profile?.userProfile && !profile?.isFetching}>
<div class={styles.userImage}>
<div class={styles.avatar}>
<div class={styles.desktopAvatar}>
Expand All @@ -478,137 +484,138 @@ const Profile: Component = () => {
</div>
</div>
</div>
</Show>

<div class={styles.profileActions}>
<div class={styles.contextArea}>
<ButtonProfile
onClick={openContextMenu}
>
<div class={styles.contextIcon}></div>
</ButtonProfile>
<Show when={showContext()}>
<PrimalMenu
id={'profile_context'}
items={profileContext()}
position="profile"
reverse={true}
/>
<div class={styles.profileActions}>
<div class={styles.contextArea}>
<ButtonProfile
onClick={openContextMenu}
>
<div class={styles.contextIcon}></div>
</ButtonProfile>
<Show when={showContext()}>
<PrimalMenu
id={'profile_context'}
items={profileContext()}
position="profile"
reverse={true}
/>
</Show>
</div>

<Show when={!isCurrentUser()}>
<ButtonProfile
onClick={onNotImplemented}
>
<div class={styles.zapIcon}></div>
</ButtonProfile>
</Show>
</div>

<Show when={!isCurrentUser()}>
<ButtonProfile
onClick={onNotImplemented}
>
<div class={styles.zapIcon}></div>
</ButtonProfile>
</Show>
<Show when={account?.publicKey}>
<ButtonProfile
onClick={() => navigate(`/messages/${profile?.userProfile?.npub}`)}
>
<div class={styles.messageIcon}></div>
</ButtonProfile>
</Show>

<Show when={account?.publicKey}>
<ButtonProfile
onClick={() => navigate(`/messages/${profile?.userProfile?.npub}`)}
>
<div class={styles.messageIcon}></div>
</ButtonProfile>
</Show>
<ButtonFollow person={profile?.userProfile} />

<ButtonFollow person={profile?.userProfile} />
<Show when={isCurrentUser()}>
<ButtonProfile
onClick={() => navigate('/settings/profile')}
title={intl.formatMessage(tActions.editProfile)}
>
<div>{intl.formatMessage(tActions.editProfile)}</div>
</ButtonProfile>
</Show>
</div>

<Show when={isCurrentUser()}>
<ButtonProfile
onClick={() => navigate('/settings/profile')}
title={intl.formatMessage(tActions.editProfile)}
>
<div>{intl.formatMessage(tActions.editProfile)}</div>
</ButtonProfile>
</Show>
</div>
<div class={styles.profileVerification}>
<Show
when={profile?.userProfile}>
<div class={styles.basicInfo}>
<div class={styles.name}>
{profileName()}
<Show when={profile?.userProfile?.nip05 && verification()}>
<div class={styles.verifiedIconL}></div>
</Show>
<Show when={isFollowingYou()}>
<div class={styles.followsBadge}>
{intl.formatMessage(t.followsYou)}
</div>
</Show>

<div class={styles.profileVerification}>
<Show when={profile?.userProfile && !profile?.isFetching}>
<div class={styles.basicInfo}>
<div class={styles.name}>
{profileName()}
<Show when={profile?.userProfile?.nip05 && verification()}>
<div class={styles.verifiedIconL}></div>
</Show>
<Show when={isFollowingYou()}>
<div class={styles.followsBadge}>
{intl.formatMessage(t.followsYou)}
</div>

<Show when={profile?.userStats.time_joined}>
<div class={styles.joined}>
{intl.formatMessage(
t.jointDate,
{
date: shortDate(profile?.userStats.time_joined),
},
)}
</div>
</Show>

</div>

<Show when={profile?.userStats.time_joined}>
<div class={styles.joined}>
{intl.formatMessage(
t.jointDate,
{
date: shortDate(profile?.userStats.time_joined),
},
)}
</div>
</Show>
</div>

<div class={styles.verificationInfo}>
<Show when={profile?.userProfile?.nip05}>
<div class={styles.verified}>
<div class={styles.nip05}>{nip05Verification(profile?.userProfile)}</div>
<div class={styles.verificationInfo}>
<Show when={profile?.userProfile?.nip05}>
<div class={styles.verified}>
<div class={styles.nip05}>{nip05Verification(profile?.userProfile)}</div>
</div>
</Show>
<div class={styles.publicKey}>
<ButtonCopy
copyValue={profile?.userProfile?.npub || profileNpub()}
labelBeforeIcon={true}
label={truncateNpub(profile?.userProfile?.npub || profileNpub())}
/>
</div>
</Show>
<div class={styles.publicKey}>
<ButtonCopy
copyValue={profile?.userProfile?.npub || profileNpub()}
labelBeforeIcon={true}
label={truncateNpub(profile?.userProfile?.npub || profileNpub())}
/>
</div>
</div>

</Show>
</div>

<Show when={renderProfileAbout().length > 0}>
<div class={styles.profileAbout} innerHTML={renderProfileAbout()}>
</Show>
</div>
</Show>

<Show when={renderProfileAbout().length > 0}>
<div class={styles.profileAbout} innerHTML={renderProfileAbout()}>
</div>
</Show>


<Show when={profile?.userProfile?.website}>
<div class={styles.profileLinks}>
<div class={styles.website}>
<a href={rectifyUrl(profile?.userProfile?.website || '')} target="_blank">
{sanitize(profile?.userProfile?.website || '')}
</a>
<Show when={profile?.userProfile?.website}>
<div class={styles.profileLinks}>
<div class={styles.website}>
<a href={rectifyUrl(profile?.userProfile?.website || '')} target="_blank">
{sanitize(profile?.userProfile?.website || '')}
</a>
</div>
</div>
</div>
</Show>
</div>

<ProfileTabs profile={profile?.userProfile}/>

<ConfirmModal
open={confirmReportUser()}
description={intl.formatMessage(tActions.reportUserConfirm, { name: userName(profile?.userProfile) })}
onConfirm={() => {
doReportUser();
setConfirmReportUser(false);
}}
onAbort={() => setConfirmReportUser(false)}
/>
</Show>
</div>

<ConfirmModal
open={confirmMuteUser()}
description={intl.formatMessage(tActions.muteUserConfirm, { name: userName(profile?.userProfile) })}
onConfirm={() => {
doMuteUser();
setConfirmMuteUser(false);
}}
onAbort={() => setConfirmMuteUser(false)}
/>
<ProfileTabs profile={profile?.userProfile}/>

<ConfirmModal
open={confirmReportUser()}
description={intl.formatMessage(tActions.reportUserConfirm, { name: userName(profile?.userProfile) })}
onConfirm={() => {
doReportUser();
setConfirmReportUser(false);
}}
onAbort={() => setConfirmReportUser(false)}
/>

<ConfirmModal
open={confirmMuteUser()}
description={intl.formatMessage(tActions.muteUserConfirm, { name: userName(profile?.userProfile) })}
onConfirm={() => {
doMuteUser();
setConfirmMuteUser(false);
}}
onAbort={() => setConfirmMuteUser(false)}
/>
</Show>
</>
)
}
Expand Down

0 comments on commit 96769f6

Please sign in to comment.