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,36 +31,8 @@ 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} />
-          {!user && (
-            <Link href="/about">
-              <a
-                className={clsx(
-                  'text-base hidden md:block whitespace-nowrap',
-                  themeClasses
-                )}
-              >
-                About
-              </a>
-            </Link>
-          )}
-
-          <Link href="/markets">
-            <a
-              className={clsx(
-                'text-base hidden md:block whitespace-nowrap',
-                themeClasses
-              )}
-            >
-              All markets
-            </a>
-          </Link>
-
-          {user ? (
-            <SignedInHeaders user={user} themeClasses={themeClasses} />
-          ) : (
-            <SignedOutHeaders themeClasses={themeClasses} />
           )}
         </Row>
       </Row>
@@ -69,41 +40,62 @@ export function NavBar(props: {
   )
 }
 
-function SignedInHeaders(props: { user: User; themeClasses?: string }) {
+function NavOptions(props: { user: User | null; themeClasses: string }) {
   const { user, themeClasses } = props
-
   return (
     <>
-      <Link href="/create">
+      {user === null && (
+        <Link href="/about">
+          <a
+            className={clsx(
+              'text-base hidden md:block whitespace-nowrap',
+              themeClasses
+            )}
+          >
+            About
+          </a>
+        </Link>
+      )}
+
+      <Link href="/markets">
         <a
           className={clsx(
             'text-base hidden md:block whitespace-nowrap',
             themeClasses
           )}
         >
-          Create a market
+          All markets
         </a>
       </Link>
 
-      <ProfileMenu user={user} />
+      {user === null ? (
-    </>
+        <>
-  )
+          <div
-}
+            className={clsx(
-
+              'text-base font-medium cursor-pointer whitespace-nowrap',
-function SignedOutHeaders(props: { themeClasses?: string }) {
+              themeClasses
-  const { themeClasses } = props
+            )}
-
+            onClick={firebaseLogin}
-  return (
+          >
-    <>
+            Sign in
-      <div
+          </div>
-        className={clsx(
+        </>
-          'text-base font-medium cursor-pointer whitespace-nowrap',
+      ) : (
-          themeClasses
+        <>
-        )}
+          <Link href="/create">
-        onClick={firebaseLogin}
+            <a
-      >
+              className={clsx(
-        Sign in
+                'text-base hidden md:block whitespace-nowrap',
-      </div>
+                themeClasses
+              )}
+            >
+              Create a market
+            </a>
+          </Link>
+
+          <ProfileMenu user={user} />
+        </>
+      )}
     </>
   )
 }