From 36de3da6bab550853ae978f3203cd2e0b269bb63 Mon Sep 17 00:00:00 2001
From: Bojan Mojsilovic <bmojsilovic@itekako.com>
Date: Wed, 6 Sep 2023 13:37:08 +0200
Subject: [PATCH] Fix flickering logo when navigating through pages

---
 src/components/Branding/Branding.tsx       | 45 ++++++++++++----------
 src/components/Layout/Layout.tsx           |  6 ++-
 src/components/MissingPage/MissingPage.tsx |  4 --
 src/pages/Downloads.tsx                    |  4 --
 src/pages/EditProfile.tsx                  |  4 --
 src/pages/Explore.tsx                      | 20 +++++-----
 src/pages/Home.tsx                         |  9 ++---
 src/pages/Messages.tsx                     |  4 --
 src/pages/Mutelist.tsx                     |  4 --
 src/pages/Notifications.tsx                |  4 --
 src/pages/Profile.tsx                      |  4 --
 src/pages/Search.tsx                       |  6 ---
 src/pages/Settings/Settings.tsx            |  4 --
 src/pages/Thread.tsx                       | 11 ++++--
 14 files changed, 49 insertions(+), 80 deletions(-)

diff --git a/src/components/Branding/Branding.tsx b/src/components/Branding/Branding.tsx
index 15e24ad..6ef42a2 100644
--- a/src/components/Branding/Branding.tsx
+++ b/src/components/Branding/Branding.tsx
@@ -1,11 +1,12 @@
-import { Component, Show } from 'solid-js';
+import { Component, Match, Show, Switch } from 'solid-js';
 
 import styles from './Branding.module.scss';
 import { useNavigate } from '@solidjs/router';
 import { useIntl } from '@cookbook/solid-intl';
 import { branding } from '../../translations';
+import PageNav from '../PageNav/PageNav';
 
-const Branding: Component<{ small: boolean, isHome?: boolean }> = (props) => {
+const Branding: Component<{ small?: boolean, isHome?: boolean, showNav?: boolean }> = (props) => {
   const navigate = useNavigate();
   const intl = useIntl();
 
@@ -19,26 +20,28 @@ const Branding: Component<{ small: boolean, isHome?: boolean }> = (props) => {
   }
 
   return (
-    <button
-      class={styles.logoLink}
-      onClick={onClick}
-    >
-      <Show
-        when={!props.small}
-        fallback={
-          <div class={styles.brandingSmall}>
-            <div class={styles.logo} />
-          </div>
-        }
+    <Show when={!props.showNav} fallback={<PageNav />}>
+      <button
+        class={styles.logoLink}
+        onClick={onClick}
       >
-        <div class={styles.branding}>
-          <div class={styles.logo} />
-          <span>
-            {intl.formatMessage(branding)}
-          </span>
-        </div>
-      </Show>
-    </button>
+        <Show
+          when={!props.small}
+          fallback={
+            <div class={styles.brandingSmall}>
+              <div class={styles.logo} />
+            </div>
+          }
+        >
+          <div class={styles.branding}>
+            <div class={styles.logo} />
+            <span>
+              {intl.formatMessage(branding)}
+            </span>
+          </div>
+        </Show>
+      </button>
+    </Show>
   )
 }
 
diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
index bda9841..54c8f12 100644
--- a/src/components/Layout/Layout.tsx
+++ b/src/components/Layout/Layout.tsx
@@ -1,4 +1,4 @@
-import { Component, createEffect, onCleanup, onMount } from 'solid-js';
+import { Component, createEffect, createSignal, onCleanup, onMount } from 'solid-js';
 
 import styles from './Layout.module.scss';
 
@@ -12,7 +12,10 @@ import zapMD from '../../assets/lottie/zap_md.json';
 import { useHomeContext } from '../../contexts/HomeContext';
 import { SendNoteResult } from '../../types/primal';
 import { useProfileContext } from '../../contexts/ProfileContext';
+import Branding from '../Branding/Branding';
 
+export const [isHome, setIsHome] = createSignal(false);
+export const [showNav, setShowNav] = createSignal(false);
 
 const Layout: Component = () => {
 
@@ -92,6 +95,7 @@ const Layout: Component = () => {
         <div class={styles.leftColumn}>
           <div>
             <div id="branding_holder" class={styles.leftHeader}>
+              <Branding isHome={isHome()} showNav={showNav()} />
             </div>
 
             <div class={styles.leftContent}>
diff --git a/src/components/MissingPage/MissingPage.tsx b/src/components/MissingPage/MissingPage.tsx
index c7fc9bb..de79f51 100644
--- a/src/components/MissingPage/MissingPage.tsx
+++ b/src/components/MissingPage/MissingPage.tsx
@@ -14,10 +14,6 @@ const MissingPage: Component<{ title: string, children?: JSXElement, id?: string
 
   return (
     <div id={props.id}>
-      <Wormhole to="branding_holder" >
-        <Branding small={false} />
-      </Wormhole>
-
       <Wormhole
         to="search_section"
       >
diff --git a/src/pages/Downloads.tsx b/src/pages/Downloads.tsx
index 1f26e42..2134a61 100644
--- a/src/pages/Downloads.tsx
+++ b/src/pages/Downloads.tsx
@@ -41,10 +41,6 @@ const Downloads: Component = () => {
 
   return (
     <div class={styles.downloadsContainer}>
-      <Wormhole to="branding_holder">
-        <Branding small={false} />
-      </Wormhole>
-
       <Wormhole
         to="search_section"
       >
diff --git a/src/pages/EditProfile.tsx b/src/pages/EditProfile.tsx
index 3bc7566..c8bb904 100644
--- a/src/pages/EditProfile.tsx
+++ b/src/pages/EditProfile.tsx
@@ -269,10 +269,6 @@ const EditProfile: Component = () => {
     <div class={styles.container}>
       <PageCaption title={intl.formatMessage(tSettings.profile.title)} />
 
-      <Wormhole to="branding_holder">
-        <Branding small={false} />
-      </Wormhole>
-
       <div id="central_header" class={styles.fullHeader}>
         <div id="profile_banner" class={`${styles.banner} ${flagBannerForWarning()}`}>
           <Show when={isUploadingBanner()}>
diff --git a/src/pages/Explore.tsx b/src/pages/Explore.tsx
index d9e2e1f..4a74c78 100644
--- a/src/pages/Explore.tsx
+++ b/src/pages/Explore.tsx
@@ -1,4 +1,4 @@
-import { Component, Show } from 'solid-js';
+import { Component, createEffect, onCleanup, onMount, Show } from 'solid-js';
 import styles from './Explore.module.scss';
 import ExploreMenu from './ExploreMenu';
 import Feed from './Feed';
@@ -17,6 +17,7 @@ import Search from '../components/Search/Search';
 import PageCaption from '../components/PageCaption/PageCaption';
 import { titleCase } from '../utils';
 import AddToHomeFeedButton from '../components/AddToHomeFeedButton/AddToHomeFeedButton';
+import { setShowNav } from '../components/Layout/Layout';
 
 
 const scopes = ['follows', 'tribe', 'network', 'global'];
@@ -59,17 +60,16 @@ const Explore: Component = () => {
       ));
     };
 
+    createEffect(() => {
+      setShowNav(hasParams());
+    });
+
+    onCleanup(() => {
+      setShowNav(false);
+    });
+
     return (
       <>
-        <Wormhole to="branding_holder">
-          <Show
-            when={hasParams()}
-            fallback={<Branding small={false} />}
-          >
-            <PageNav />
-          </Show>
-        </Wormhole>
-
         <Wormhole
           to="search_section"
         >
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index ec924b9..e4fdf19 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -29,6 +29,7 @@ import { userName } from '../stores/profile';
 import { useAccountContext } from '../contexts/AccountContext';
 import { feedNewPosts, placeholders } from '../translations';
 import Search from '../components/Search/Search';
+import { setIsHome } from '../components/Layout/Layout';
 
 
 const Home: Component = () => {
@@ -50,6 +51,7 @@ const Home: Component = () => {
 
 
   onMount(() => {
+    setIsHome(true);
     scrollWindowTo(context?.scrollTop);
   });
 
@@ -99,6 +101,7 @@ const Home: Component = () => {
 
   onCleanup(()=> {
     clearInterval(checkNewNotesTimer);
+    setIsHome(false);
   });
 
   const loadNewContent = () => {
@@ -115,12 +118,6 @@ const Home: Component = () => {
 
   return (
     <div class={styles.homeContent}>
-      <Wormhole
-        to="branding_holder"
-      >
-        <Branding small={false} isHome={true} />
-      </Wormhole>
-
       <Wormhole
         to="search_section"
       >
diff --git a/src/pages/Messages.tsx b/src/pages/Messages.tsx
index 3539eee..a3fbed0 100644
--- a/src/pages/Messages.tsx
+++ b/src/pages/Messages.tsx
@@ -877,10 +877,6 @@ const Messages: Component = () => {
 
   return (
     <div>
-      <Wormhole to="branding_holder">
-        <Branding small={false} />
-      </Wormhole>
-
       <Wormhole
         to="search_section"
       >
diff --git a/src/pages/Mutelist.tsx b/src/pages/Mutelist.tsx
index fa4c063..556acfb 100644
--- a/src/pages/Mutelist.tsx
+++ b/src/pages/Mutelist.tsx
@@ -105,10 +105,6 @@ const Mutelist: Component = () => {
 
   return (
     <div class={styles.settingsContainer}>
-      <Wormhole to='branding_holder'>
-        <Branding small={false} />
-      </Wormhole>
-
       <PageCaption>
         <div style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
           <div style="display: flex; align-items: center;">
diff --git a/src/pages/Notifications.tsx b/src/pages/Notifications.tsx
index 32abb0d..f9eef7c 100644
--- a/src/pages/Notifications.tsx
+++ b/src/pages/Notifications.tsx
@@ -1050,10 +1050,6 @@ const Notifications: Component = () => {
 
   return (
     <div>
-      <Wormhole to="branding_holder">
-        <Branding small={false} />
-      </Wormhole>
-
       <Wormhole
         to="search_section"
       >
diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx
index 41a4426..6df8d30 100644
--- a/src/pages/Profile.tsx
+++ b/src/pages/Profile.tsx
@@ -457,10 +457,6 @@ const Profile: Component = () => {
         )}
       />
 
-      <Wormhole to='branding_holder'>
-        <Branding small={false} />
-      </Wormhole>
-
       <StickySidebar>
         <ProfileSidebar notes={profile?.sidebar.notes} profile={profile?.userProfile} />
       </StickySidebar>
diff --git a/src/pages/Search.tsx b/src/pages/Search.tsx
index e85aa2f..9826f81 100644
--- a/src/pages/Search.tsx
+++ b/src/pages/Search.tsx
@@ -67,12 +67,6 @@ const Search: Component = () => {
 
   return (
     <>
-      <Wormhole
-        to="branding_holder"
-      >
-        <Branding small={false} />
-      </Wormhole>
-
       <StickySidebar>
         <SearchSidebar users={search?.contentUsers || []} />
       </StickySidebar>
diff --git a/src/pages/Settings/Settings.tsx b/src/pages/Settings/Settings.tsx
index 7a25b68..8492be3 100644
--- a/src/pages/Settings/Settings.tsx
+++ b/src/pages/Settings/Settings.tsx
@@ -20,10 +20,6 @@ const Settings: Component = () => {
 
   return (
     <div class={styles.settingsContainer}>
-      <Wormhole to="branding_holder">
-        <Branding small={false} />
-      </Wormhole>
-
       <Wormhole to="search_section">
         <Search />
       </Wormhole>
diff --git a/src/pages/Thread.tsx b/src/pages/Thread.tsx
index 0c82efe..e7acc49 100644
--- a/src/pages/Thread.tsx
+++ b/src/pages/Thread.tsx
@@ -1,4 +1,4 @@
-import { Component, createEffect, createMemo, For, onCleanup, Show } from 'solid-js';
+import { Component, createEffect, createMemo, For, onCleanup, onMount, Show } from 'solid-js';
 import Note from '../components/Note/Note';
 import styles from './Thread.module.scss';
 import { useNavigate, useParams } from '@solidjs/router';
@@ -17,6 +17,7 @@ import { scrollWindowTo } from '../lib/scroll';
 import { useIntl } from '@cookbook/solid-intl';
 import Search from '../components/Search/Search';
 import { thread as t } from '../translations';
+import { setShowNav } from '../components/Layout/Layout';
 
 
 const Thread: Component = () => {
@@ -111,10 +112,15 @@ const Thread: Component = () => {
     }
   });
 
+  onMount(() => {
+    setShowNav(true);
+  });
+
   onCleanup(() => {
     const pn = document.getElementById('primary_note');
 
     pn && observer?.unobserve(pn);
+    setShowNav(false);
   });
 
   const onNotePosted = (result: SendNoteResult) => {
@@ -123,9 +129,6 @@ const Thread: Component = () => {
 
   return (
     <div>
-      <Wormhole to='branding_holder'>
-        <PageNav />
-      </Wormhole>
 
       <Wormhole
         to="search_section"