Load navbar more gracefully: don't show options until user loaded

web/components/manifold-logo.tsx

@@ -1,4 +1,5 @@
 import Link from 'next/link'
+import Image from 'next/image'
 import clsx from 'clsx'
 
 export function ManifoldLogo(props: { darkBackground?: boolean }) {
@@ -7,7 +8,7 @@ export function ManifoldLogo(props: { darkBackground?: boolean }) {
   return (
     <Link href="/">
       <a className="flex flex-row gap-4">
-        <img
+        <Image
           className="hover:rotate-12 transition-all"
           src={darkBackground ? '/logo-white.svg' : '/logo.svg'}
           width={45}

web/components/nav-bar.tsx

@@ -11,9 +11,8 @@ export function NavBar(props: {
   darkBackground?: boolean
   wide?: boolean
   className?: string
-  children?: any
 }) {
-  const { darkBackground, wide, className, children } = props
+  const { darkBackground, wide, className } = props
 
   const user = useUser()
 
@@ -32,9 +31,20 @@ export function NavBar(props: {
         <ManifoldLogo darkBackground={darkBackground} />
 
         <Row className="items-center gap-6 sm:gap-8 md:ml-16 lg:ml-40">
-          {children}
+          {(user || user === null) && (
+            <NavOptions user={user} themeClasses={themeClasses} />
+          )}
+        </Row>
+      </Row>
+    </nav>
+  )
+}
 
-          {!user && (
+function NavOptions(props: { user: User | null; themeClasses: string }) {
+  const { user, themeClasses } = props
+  return (
+    <>
+      {user === null && (
         <Link href="/about">
           <a
             className={clsx(
@@ -58,21 +68,19 @@ export function NavBar(props: {
         </a>
       </Link>
 
-          {user ? (
+      {user === null ? (
-            <SignedInHeaders user={user} themeClasses={themeClasses} />
+        <>
-          ) : (
+          <div
-            <SignedOutHeaders themeClasses={themeClasses} />
+            className={clsx(
+              'text-base font-medium cursor-pointer whitespace-nowrap',
+              themeClasses
             )}
-        </Row>
+            onClick={firebaseLogin}
-      </Row>
+          >
-    </nav>
+            Sign in
-  )
+          </div>
-}
+        </>
-
+      ) : (
-function SignedInHeaders(props: { user: User; themeClasses?: string }) {
-  const { user, themeClasses } = props
-
-  return (
         <>
           <Link href="/create">
             <a
@@ -87,23 +95,7 @@ function SignedInHeaders(props: { user: User; themeClasses?: string }) {
 
           <ProfileMenu user={user} />
         </>
-  )
-}
-
-function SignedOutHeaders(props: { themeClasses?: string }) {
-  const { themeClasses } = props
-
-  return (
-    <>
-      <div
-        className={clsx(
-          'text-base font-medium cursor-pointer whitespace-nowrap',
-          themeClasses
       )}
-        onClick={firebaseLogin}
-      >
-        Sign in
-      </div>
     </>
   )
 }