Defer mobile navbar auth loading (#1110)

Author: tannerlinsley

src/components/Navbar.tsx

@@ -693,6 +693,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
             <MobileNavigation
               key={mobileMenuOpen ? 'open' : 'closed'}
               activeKey={mobileMenuKey}
+              loadAuthControls={mobileMenuOpen}
               onBack={() => setMobileMenuKey(null)}
               onNavigate={() => setMobileMenuOpen(false)}
               onOpenLibraries={() => {
@@ -836,12 +837,14 @@ function DesktopNavDropdown({
 
 function MobileNavigation({
   activeKey,
+  loadAuthControls,
   onBack,
   onNavigate,
   onOpenLibraries,
   onSelect,
 }: {
   activeKey: NavMenuKey | null
+  loadAuthControls: boolean
   onBack: () => void
   onNavigate: () => void
   onOpenLibraries: () => void
@@ -859,6 +862,18 @@ function MobileNavigation({
     }
   }
 
+  const signIn = (
+    <Link
+      to="/login"
+      tabIndex={activeGroup ? -1 : 0}
+      onClick={onNavigate}
+      className="flex w-full items-center gap-3.5 rounded-xl px-3 py-4 text-left font-ds-display text-ds-heading-3 text-[#a3a3a3] transition-colors hover:bg-[#171717] hover:text-white focus-visible:bg-[#171717] focus-visible:text-white focus-visible:outline-none"
+    >
+      <SignInIcon className="size-8 shrink-0" />
+      Sign In
+    </Link>
+  )
+
   return (
     <nav aria-label="Mobile navigation" className="overflow-hidden">
       <div
@@ -912,24 +927,16 @@ function MobileNavigation({
               <Sparkles className="size-8 shrink-0" />
               Ask AI
             </button>
-            <React.Suspense
-              fallback={
-                <Link
-                  to="/login"
+            {loadAuthControls ? (
+              <React.Suspense fallback={signIn}>
+                <LazyMobileNavbarAuthControls
                   tabIndex={activeGroup ? -1 : 0}
-                  onClick={onNavigate}
-                  className="flex w-full items-center gap-3.5 rounded-xl px-3 py-4 text-left font-ds-display text-ds-heading-3 text-[#a3a3a3] transition-colors hover:bg-[#171717] hover:text-white focus-visible:bg-[#171717] focus-visible:text-white focus-visible:outline-none"
-                >
-                  <SignInIcon className="size-8 shrink-0" />
-                  Sign In
-                </Link>
-              }
-            >
-              <LazyMobileNavbarAuthControls
-                tabIndex={activeGroup ? -1 : 0}
-                onNavigate={onNavigate}
-              />
-            </React.Suspense>
+                  onNavigate={onNavigate}
+                />
+              </React.Suspense>
+            ) : (
+              signIn
+            )}
           </div>
         </div>