From dcf07fe0a151b06e278b3ca54f471ff1d7ac007e Mon Sep 17 00:00:00 2001
From: jahooma <jahooma@gmail.com>
Date: Thu, 13 Jan 2022 16:09:13 -0600
Subject: [PATCH] Load navbar more gracefully: don't show options until user
 loaded

---
 web/components/manifold-logo.tsx |   3 +-
 web/components/nav-bar.tsx       | 102 ++++++++++++++-----------------
 2 files changed, 49 insertions(+), 56 deletions(-)

diff --git a/web/components/manifold-logo.tsx b/web/components/manifold-logo.tsx
index 545093e5..6d600ab2 100644
--- a/web/components/manifold-logo.tsx
+++ b/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}
diff --git a/web/components/nav-bar.tsx b/web/components/nav-bar.tsx
index 2757b46e..ec80fbab 100644
--- a/web/components/nav-bar.tsx
+++ b/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 && (
-            <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} />
+          {(user || user === null) && (
+            <NavOptions user={user} 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} />
-    </>
-  )
-}
-
-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>
+      {user === null ? (
+        <>
+          <div
+            className={clsx(
+              'text-base font-medium cursor-pointer whitespace-nowrap',
+              themeClasses
+            )}
+            onClick={firebaseLogin}
+          >
+            Sign in
+          </div>
+        </>
+      ) : (
+        <>
+          <Link href="/create">
+            <a
+              className={clsx(
+                'text-base hidden md:block whitespace-nowrap',
+                themeClasses
+              )}
+            >
+              Create a market
+            </a>
+          </Link>
+
+          <ProfileMenu user={user} />
+        </>
+      )}
     </>
   )
 }