Fix flickering logo when navigating through pages

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
+    <Show when={!props.showNav} fallback={<PageNav />}>
-      class={styles.logoLink}
+      <button
-      onClick={onClick}
+        class={styles.logoLink}
-    >
+        onClick={onClick}
-      <Show
-        when={!props.small}
-        fallback={
-          <div class={styles.brandingSmall}>
-            <div class={styles.logo} />
-          </div>
-        }
       >
-        <div class={styles.branding}>
+        <Show
-          <div class={styles.logo} />
+          when={!props.small}
-          <span>
+          fallback={
-            {intl.formatMessage(branding)}
+            <div class={styles.brandingSmall}>
-          </span>
+              <div class={styles.logo} />
-        </div>
+            </div>
-      </Show>
+          }
-    </button>
+        >
+          <div class={styles.branding}>
+            <div class={styles.logo} />
+            <span>
+              {intl.formatMessage(branding)}
+            </span>
+          </div>
+        </Show>
+      </button>
+    </Show>
   )
 }
 

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}>

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"
       >

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"
       >

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()}>

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"
         >

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"
       >

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"
       >

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;">

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"
       >

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>

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>

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>

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"