fix: navbar showing Log In to signed-in users

src/components/Navbar.tsx

@@ -76,6 +76,7 @@ import {
   trackPartnerInquiry,
 } from '~/utils/partner-inquiry'
 import { fetchRecentPosts, type RecentPost } from '~/utils/blog.functions'
+import { useCurrentUserQuery } from '~/hooks/useCurrentUser'
 
 const LogoSection = () => {
   return (
@@ -484,7 +485,6 @@ export function Navbar({ children }: { children: React.ReactNode }) {
   )
   const [dismissedDesktopMenuKey, setDismissedDesktopMenuKey] =
     React.useState<NavMenuKey | null>(null)
-  const [canLoadAuthControls, setCanLoadAuthControls] = React.useState(false)
   const [isScrolled, setIsScrolled] = React.useState(false)
 
   React.useEffect(() => {
@@ -534,10 +534,6 @@ export function Navbar({ children }: { children: React.ReactNode }) {
     [blurActiveNavigationElement],
   )
 
-  const requestAuthControls = React.useCallback(() => {
-    setCanLoadAuthControls(true)
-  }, [])
-
   React.useEffect(() => {
     if (!mobileMenuOpen) {
       return
@@ -556,6 +552,8 @@ export function Navbar({ children }: { children: React.ReactNode }) {
     }
   }, [mobileMenuOpen])
 
+  const userQuery = useCurrentUserQuery()
+
   const getLoginButtonFallback = (className?: string) => (
     <Link
       to="/login"
@@ -572,14 +570,23 @@ export function Navbar({ children }: { children: React.ReactNode }) {
       <SignInIcon className="size-4" weight="bold" />
     </Link>
   )
-  const renderAuthControls = (className?: string) =>
-    canLoadAuthControls ? (
-      <React.Suspense fallback={getLoginButtonFallback(className)}>
-        <LazyNavbarAuthControls className={className} />
-      </React.Suspense>
+  const getAuthControlsFallback = (className?: string) =>
+    userQuery.data || userQuery.isLoading ? (
+      <div
+        aria-hidden="true"
+        className={twMerge(
+          'size-[26px] animate-pulse rounded-full bg-gray-200 dark:bg-gray-700',
+          className,
+        )}
+      />
     ) : (
       getLoginButtonFallback(className)
     )
+  const renderAuthControls = (className?: string) => (
+    <React.Suspense fallback={getAuthControlsFallback(className)}>
+      <LazyNavbarAuthControls className={className} />
+    </React.Suspense>
+  )
 
   const socialLinks = <SocialStack />
   const siteBackdropActive = mobileMenuOpen
@@ -643,12 +650,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
         <div className={DESKTOP_NAV_CLASS}>
           <AiDockButton />
         </div>
-        <div
-          className={twMerge(DESKTOP_NAV_CLASS, 'items-center gap-2')}
-          onFocusCapture={requestAuthControls}
-          onPointerEnter={requestAuthControls}
-          onTouchStart={requestAuthControls}
-        >
+        <div className={twMerge(DESKTOP_NAV_CLASS, 'items-center gap-2')}>
           {renderAuthControls()}
         </div>
         <button
@@ -862,6 +864,7 @@ function MobileNavigation({
 }) {
   const activeGroup = NAV_GROUPS.find((group) => group.key === activeKey)
   const { openAiDock, openSearch } = useSearchContext()
+  const userQuery = useCurrentUserQuery()
 
   const openUtility = (utility: 'ai' | 'search') => {
     onNavigate()
@@ -938,7 +941,18 @@ function MobileNavigation({
               Ask AI
             </button>
             {loadAuthControls ? (
-              <React.Suspense fallback={signIn}>
+              <React.Suspense
+                fallback={
+                  userQuery.data || userQuery.isLoading ? (
+                    <div
+                      aria-hidden="true"
+                      className="h-16 w-full animate-pulse rounded-xl bg-[#171717]"
+                    />
+                  ) : (
+                    signIn
+                  )
+                }
+              >
                 <LazyMobileNavbarAuthControls
                   tabIndex={activeGroup ? -1 : 0}
                   onNavigate={onNavigate}

src/components/NavbarAuthControls.tsx

@@ -70,12 +70,22 @@ export function NavbarAuthControls({ className }: NavbarAuthControlsProps) {
     )
   }
 
+  const loadingPlaceholder = (
+    <div
+      aria-hidden="true"
+      className={twMerge(
+        'size-[26px] animate-pulse rounded-full bg-gray-200 dark:bg-gray-700',
+        className,
+      )}
+    />
+  )
+
   return (
     <>
-      <AuthLoading>{loginButton}</AuthLoading>
+      <AuthLoading>{loadingPlaceholder}</AuthLoading>
       <Unauthenticated>{loginButton}</Unauthenticated>
       <Authenticated>
-        <React.Suspense fallback={loginButton}>
+        <React.Suspense fallback={loadingPlaceholder}>
           <LazyAuthenticatedUserMenu
             user={user ?? null}
             canAdmin={canAdmin}
@@ -132,9 +142,16 @@ export function MobileNavbarAuthControls({
     </Link>
   )
 
+  const loadingPlaceholder = (
+    <div
+      aria-hidden="true"
+      className="h-16 w-full animate-pulse rounded-xl bg-[#171717]"
+    />
+  )
+
   return (
     <>
-      <AuthLoading>{signIn}</AuthLoading>
+      <AuthLoading>{loadingPlaceholder}</AuthLoading>
       <Unauthenticated>{signIn}</Unauthenticated>
       <Authenticated>
         <Link