From 2435c60039060a75e80ff452a388d671bc8f05cd Mon Sep 17 00:00:00 2001
From: Bojan Mojsilovic <bmojsilovic@itekako.com>
Date: Tue, 3 Oct 2023 17:15:19 +0200
Subject: [PATCH] Fix profile header flicker on load

---
 src/contexts/ProfileContext.tsx |   7 +
 src/pages/Profile.module.scss   |   7 +
 src/pages/Profile.tsx           | 272 +++++++++++++++++---------------
 3 files changed, 156 insertions(+), 130 deletions(-)

diff --git a/src/contexts/ProfileContext.tsx b/src/contexts/ProfileContext.tsx
index e5b585d3..0c254f3a 100644
--- a/src/contexts/ProfileContext.tsx
+++ b/src/contexts/ProfileContext.tsx
@@ -123,6 +123,7 @@ export type ProfileContextStore = {
     addContact: (pubkey: string, source: PrimalUser[]) => void,
     fetchZapList: (pubkey: string | undefined) => void,
     fetchNextZapsPage: () => void,
+    resetProfile: () => void,
   }
 }
 
@@ -877,6 +878,11 @@ export const ProfileProvider = (props: { children: ContextChildren }) => {
     }
   }
 
+  const resetProfile = () => {
+    updateStore('userProfile', () => undefined);
+    updateStore('userStats', () => ({ ...emptyStats }));
+  };
+
   const refreshNotes = () => {
   };
 
@@ -1120,6 +1126,7 @@ export const ProfileProvider = (props: { children: ContextChildren }) => {
       fetchZapList,
       fetchNextZapsPage,
       clearZaps,
+      resetProfile,
     },
   });
 
diff --git a/src/pages/Profile.module.scss b/src/pages/Profile.module.scss
index 95d86cf4..6ad78aaa 100644
--- a/src/pages/Profile.module.scss
+++ b/src/pages/Profile.module.scss
@@ -5,6 +5,13 @@
   // min-height: 474px;
 }
 
+.emptyHeader {
+  position: relative;
+  background-color: var(--background-card);
+  padding-bottom: 4px;
+  height: 540px;
+}
+
 .banner {
   width: 100%;
   height: 214px;
diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx
index 383b5239..4472c68a 100644
--- a/src/pages/Profile.tsx
+++ b/src/pages/Profile.tsx
@@ -7,6 +7,8 @@ import {
   createSignal,
   For,
   Match,
+  onCleanup,
+  onMount,
   Resource,
   Show,
   Switch
@@ -98,6 +100,10 @@ const Profile: Component = () => {
     profile?.actions.clearZaps();
   }
 
+  onCleanup(() => {
+    profile?.actions.resetProfile();
+  })
+
   createEffect(() => {
     if (account?.isKeyLookupDone) {
       setProfile(getHex());
@@ -456,159 +462,165 @@ 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?.isFetching && (profile?.userProfile && profile.userProfile.pubkey === getHex())}
+        fallback={<div id="central_header" class={styles.emptyHeader}></div>}
+      >
 
-        <Show when={profile?.userProfile && !profile?.isFetching}>
-          <div class={styles.userImage}>
-            <div class={styles.avatar}>
-              <div class={styles.desktopAvatar}>
-                <Avatar user={profile?.userProfile} size="xxl" zoomable={true} />
-              </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>
 
-              <div class={styles.phoneAvatar}>
-                <Avatar user={profile?.userProfile} size="lg" zoomable={true} />
+          <Show when={profile?.userProfile && !profile?.isFetching}>
+            <div class={styles.userImage}>
+              <div class={styles.avatar}>
+                <div class={styles.desktopAvatar}>
+                  <Avatar user={profile?.userProfile} size="xxl" zoomable={true} />
+                </div>
+
+                <div class={styles.phoneAvatar}>
+                  <Avatar user={profile?.userProfile} size="lg" zoomable={true} />
+                </div>
               </div>
             </div>
-          </div>
-        </Show>
+          </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 && !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>
 
-        <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>
     </>
   )
 }