www nav CTAs to only render after user is loaded (supabase#38177)

Author: joshenlim

apps/www/components/Nav/index.tsx

@@ -3,8 +3,9 @@ import { useRouter } from 'next/router'
 import React, { useState } from 'react'
 import { useWindowSize } from 'react-use'
 
-import { useIsLoggedIn, useUser } from 'common'
+import { useIsLoggedIn, useIsUserLoading, useUser } from 'common'
 import { Button, buttonVariants, cn } from 'ui'
+import { AuthenticatedDropdownMenu } from 'ui-patterns'
 import {
   NavigationMenu,
   NavigationMenuContent,
@@ -13,15 +14,14 @@ import {
   NavigationMenuList,
   NavigationMenuTrigger,
 } from 'ui/src/components/shadcn/ui/navigation-menu'
-import { AuthenticatedDropdownMenu } from 'ui-patterns'
 
 import ScrollProgress from 'components/ScrollProgress'
+import { useSendTelemetryEvent } from 'lib/telemetry'
 import GitHubButton from './GitHubButton'
 import HamburgerButton from './HamburgerMenu'
 import MenuItem from './MenuItem'
 import MobileMenu from './MobileMenu'
 import RightClickBrandLogo from './RightClickBrandLogo'
-import { useSendTelemetryEvent } from 'lib/telemetry'
 import useDropdownMenu from './useDropdownMenu'
 
 import { getMenu } from 'data/nav'
@@ -35,12 +35,15 @@ const Nav = ({ hideNavbar, stickyNavbar = true }: Props) => {
   const router = useRouter()
   const { width } = useWindowSize()
   const [open, setOpen] = useState(false)
-  const isLoggedIn = useIsLoggedIn()
   const menu = getMenu()
   const sendTelemetryEvent = useSendTelemetryEvent()
   const user = useUser()
   const userMenu = useDropdownMenu(user)
 
+  const isLoggedIn = useIsLoggedIn()
+  const isLoadingUser = useIsUserLoading()
+  console.log({ isLoadingUser, isLoggedIn })
+
   const isLaunchWeekPage = router.pathname.includes('/launch-week')
   const isLaunchWeekXPage = router.pathname === '/launch-week/x'
   const isGAWeekSection = router.pathname.startsWith('/ga-week')
@@ -126,47 +129,49 @@ const Nav = ({ hideNavbar, stickyNavbar = true }: Props) => {
                   </NavigationMenuList>
                 </NavigationMenu>
               </div>
-              <div className="flex items-center gap-2 opacity-0 animate-fade-in !scale-100 delay-300">
-                <GitHubButton />
+              {!isLoadingUser && (
+                <div className="flex items-center gap-2 opacity-0 animate-fade-in !scale-100 delay-300">
+                  <GitHubButton />
 
-                {isLoggedIn ? (
-                  <>
-                    <Button className="hidden lg:block" asChild>
-                      <Link href="/dashboard/projects">Dashboard</Link>
-                    </Button>
-                    <AuthenticatedDropdownMenu menu={userMenu} user={user} site="www" />
-                  </>
-                ) : (
-                  <>
-                    <Button type="default" className="hidden lg:block" asChild>
-                      <Link
-                        href="https://supabase.com/dashboard"
-                        onClick={() =>
-                          sendTelemetryEvent({
-                            action: 'sign_in_button_clicked',
-                            properties: { buttonLocation: 'Header Nav' },
-                          })
-                        }
-                      >
-                        Sign in
-                      </Link>
-                    </Button>
-                    <Button className="hidden lg:block" asChild>
-                      <Link
-                        href="https://supabase.com/dashboard"
-                        onClick={() =>
-                          sendTelemetryEvent({
-                            action: 'start_project_button_clicked',
-                            properties: { buttonLocation: 'Header Nav' },
-                          })
-                        }
-                      >
-                        Start your project
-                      </Link>
-                    </Button>
-                  </>
-                )}
-              </div>
+                  {isLoggedIn ? (
+                    <>
+                      <Button className="hidden lg:block" asChild>
+                        <Link href="/dashboard/projects">Dashboard</Link>
+                      </Button>
+                      <AuthenticatedDropdownMenu menu={userMenu} user={user} site="www" />
+                    </>
+                  ) : (
+                    <>
+                      <Button type="default" className="hidden lg:block" asChild>
+                        <Link
+                          href="https://supabase.com/dashboard"
+                          onClick={() =>
+                            sendTelemetryEvent({
+                              action: 'sign_in_button_clicked',
+                              properties: { buttonLocation: 'Header Nav' },
+                            })
+                          }
+                        >
+                          Sign in
+                        </Link>
+                      </Button>
+                      <Button className="hidden lg:block" asChild>
+                        <Link
+                          href="https://supabase.com/dashboard"
+                          onClick={() =>
+                            sendTelemetryEvent({
+                              action: 'start_project_button_clicked',
+                              properties: { buttonLocation: 'Header Nav' },
+                            })
+                          }
+                        >
+                          Start your project
+                        </Link>
+                      </Button>
+                    </>
+                  )}
+                </div>
+              )}
             </div>
             <HamburgerButton
               toggleFlyOut={() => setOpen(true)}