From 977f3d08136bbcc1b181bacf42078c06f7886baf Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Mon, 13 Apr 2026 10:43:12 -0700
Subject: [PATCH 1/2] fix(navbar): eliminate auth button flash using
 useSyncExternalStore

---
 .../navbar/components/github-stars.tsx        |  2 +-
 .../(landing)/components/navbar/navbar.tsx    | 27 ++++++++++++-------
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/apps/sim/app/(landing)/components/navbar/components/github-stars.tsx b/apps/sim/app/(landing)/components/navbar/components/github-stars.tsx
index e4031719b2a..a8aafdc45a3 100644
--- a/apps/sim/app/(landing)/components/navbar/components/github-stars.tsx
+++ b/apps/sim/app/(landing)/components/navbar/components/github-stars.tsx
@@ -7,7 +7,7 @@ import { getFormattedGitHubStars } from '@/app/(landing)/actions/github'
 
 const logger = createLogger('github-stars')
 
-const INITIAL_STARS = '27.6k'
+const INITIAL_STARS = '27.7k'
 
 /**
  * Client component that displays GitHub stars count.
diff --git a/apps/sim/app/(landing)/components/navbar/navbar.tsx b/apps/sim/app/(landing)/components/navbar/navbar.tsx
index 7e8d7342616..16dab58c072 100644
--- a/apps/sim/app/(landing)/components/navbar/navbar.tsx
+++ b/apps/sim/app/(landing)/components/navbar/navbar.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from 'react'
 import Image from 'next/image'
 import Link from 'next/link'
 import { useSearchParams } from 'next/navigation'
@@ -38,6 +38,8 @@ const NAV_LINKS: NavLink[] = [
 const LOGO_CELL = 'flex items-center pl-5 lg:pl-16 pr-5'
 const LINK_CELL = 'flex items-center px-3.5'
 
+const emptySubscribe = () => () => {}
+
 interface NavbarProps {
   logoOnly?: boolean
   blogPosts?: NavBlogPost[]
@@ -51,6 +53,12 @@ export default function Navbar({ logoOnly = false, blogPosts = [] }: NavbarProps
   const isBrowsingHome = searchParams.has('home')
   const useHomeLinks = isAuthenticated || isBrowsingHome
   const logoHref = useHomeLinks ? '/?home' : '/'
+  const mounted = useSyncExternalStore(
+    emptySubscribe,
+    () => true,
+    () => false
+  )
+  const shouldShow = mounted && !isSessionPending
   const [activeDropdown, setActiveDropdown] = useState<DropdownId>(null)
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
   const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
@@ -206,9 +214,10 @@ export default function Navbar({ logoOnly = false, blogPosts = [] }: NavbarProps
           <div className='hidden flex-1 lg:block' />
 
           <div
+            aria-hidden={!shouldShow}
             className={cn(
-              'hidden items-center gap-2 pr-16 pl-5 lg:flex',
-              isSessionPending && 'invisible'
+              'hidden items-center gap-2 pr-16 pl-5 transition-opacity duration-200 lg:flex',
+              shouldShow ? 'opacity-100' : 'pointer-events-none opacity-0'
             )}
           >
             {isAuthenticated ? (
@@ -326,7 +335,11 @@ export default function Navbar({ logoOnly = false, blogPosts = [] }: NavbarProps
             </ul>
 
             <div
-              className={cn('mt-auto flex flex-col gap-2.5 p-5', isSessionPending && 'invisible')}
+              aria-hidden={!shouldShow}
+              className={cn(
+                'mt-auto flex flex-col gap-2.5 p-5 transition-opacity duration-200',
+                shouldShow ? 'opacity-100' : 'pointer-events-none opacity-0'
+              )}
             >
               {isAuthenticated ? (
                 <Link
@@ -392,11 +405,7 @@ interface NavChevronProps {
   open: boolean
 }
 
-/**
- * Animated chevron matching the exact geometry of the emcn ChevronDown SVG.
- * Each arm rotates around its midpoint so the center vertex travels up/down
- * while the outer endpoints adjust — producing a Stripe-style morph.
- */
+/** Matches the exact geometry of the emcn ChevronDown SVG — transform origins are intentional. */
 function NavChevron({ open }: NavChevronProps) {
   return (
     <svg width='9' height='6' viewBox='0 0 10 6' fill='none' className='mt-[1.5px] flex-shrink-0'>

From 73e12564e6fce7640c16351331050254896ebac4 Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Mon, 13 Apr 2026 10:47:52 -0700
Subject: [PATCH 2/2] fix(navbar): add inert and fix aria-hidden on auth button
 containers

---
 apps/sim/app/(landing)/components/navbar/navbar.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/sim/app/(landing)/components/navbar/navbar.tsx b/apps/sim/app/(landing)/components/navbar/navbar.tsx
index 16dab58c072..54579bc173e 100644
--- a/apps/sim/app/(landing)/components/navbar/navbar.tsx
+++ b/apps/sim/app/(landing)/components/navbar/navbar.tsx
@@ -214,7 +214,8 @@ export default function Navbar({ logoOnly = false, blogPosts = [] }: NavbarProps
           <div className='hidden flex-1 lg:block' />
 
           <div
-            aria-hidden={!shouldShow}
+            aria-hidden={!shouldShow || undefined}
+            inert={!shouldShow || undefined}
             className={cn(
               'hidden items-center gap-2 pr-16 pl-5 transition-opacity duration-200 lg:flex',
               shouldShow ? 'opacity-100' : 'pointer-events-none opacity-0'
@@ -335,7 +336,8 @@ export default function Navbar({ logoOnly = false, blogPosts = [] }: NavbarProps
             </ul>
 
             <div
-              aria-hidden={!shouldShow}
+              aria-hidden={!shouldShow || undefined}
+              inert={!shouldShow || undefined}
               className={cn(
                 'mt-auto flex flex-col gap-2.5 p-5 transition-opacity duration-200',
                 shouldShow ? 'opacity-100' : 'pointer-events-none opacity-0'