Do not render anonymous page before auth

1 files changed, 55 insertions, 41 deletions

diff --git a/vnext/src/App.js b/vnext/src/App.js
index 7738abcd..41c8849b 100644
--- a/vnext/src/App.js
+++ b/vnext/src/App.js
@@ -32,9 +32,14 @@ export default function App() {
     let retpath = params.retpath || `${window.location.protocol}//${window.location.host}${window.location.pathname}`;
     window.history.replaceState({}, document.title, retpath);
   }
-  const [visitor, setVisitor] = useState({
-    uid: 0
-  });
+
+  /**
+   * @type {import('./api').SecureUser}
+   */
+  const anonymous = {
+    uid: -1
+  };
+  const [visitor, setVisitor] = useState(anonymous);
 
   let updateStatus = () => {
     // refresh server visitor state (unread counters)
@@ -102,47 +107,56 @@ export default function App() {
         <div id="header">
           <div id="header_wrapper">
             {
-              visitor.uid > 0 ?
-                <UserLink user={visitor} />
-                : <div id="logo">
-                  <Link to="/">Juick</Link>
-                </div>
+              visitor.uid < 0 ?
+                <nav id="global">
+                  <a href="/">Loading...</a>
+                </nav>
+                : visitor.uid > 0 ?
+                  <UserLink user={visitor} />
+                  : <div id="logo">
+                    <Link to="/">Juick</Link>
+                  </div>
             }
-            <div id="search" className="desktop">
-              <SearchBox pathname="/discover" onSearch={search} />
-            </div>
-            <nav id="global">
-              {visitor.uid > 0 ?
-                <Link to={{ pathname: '/' }}>
-                  <Icon name="ei-bell" size="s" /><span className="desktop">Discuss</span>
-                  {
-                    visitor.unreadCount &&
-                    <span className="badge">{visitor.unreadCount}</span>
+            {
+              visitor.uid >= 0 &&
+              <>
+                <div id="search" className="desktop">
+                  <SearchBox pathname="/discover" onSearch={search} />
+                </div>
+                <nav id="global">
+                  {visitor.uid > 0 ?
+                    <Link to={{ pathname: '/' }}>
+                      <Icon name="ei-bell" size="s" /><span className="desktop">Discuss</span>
+                      {
+                        visitor.unreadCount &&
+                        <span className="badge">{visitor.unreadCount}</span>
+                      }
+                    </Link>
+                    :
+                    <Link to='/?media=1' rel="nofollow">
+                      <Icon name="ei-camera" size="s" />
+                      <span className="desktop">Photos</span>
+                    </Link>
                   }
-                </Link>
-                :
-                <Link to='/?media=1' rel="nofollow">
-                  <Icon name="ei-camera" size="s" />
-                  <span className="desktop">Photos</span>
-                </Link>
-              }
-              <Link to={{ pathname: '/discover' }} rel="nofollow">
-                <Icon name="ei-search" size="s" />
-                <span className="desktop">Discover</span>
-              </Link>
+                  <Link to={{ pathname: '/discover' }} rel="nofollow">
+                    <Icon name="ei-search" size="s" />
+                    <span className="desktop">Discover</span>
+                  </Link>
 
-              {visitor.uid > 0 ?
-                <Link to={{ pathname: '/post' }}>
-                  <Icon name="ei-pencil" size="s" />
-                  <span className="desktop">Post</span>
-                </Link>
-                :
-                <Link to={{ pathname: '/login', state: { retpath: window.location.pathname } }}>
-                  <Icon name="ei-user" size="s" />
-                  <span className="desktop">Login</span>
-                </Link>
-              }
-            </nav>
+                  {visitor.uid > 0 ?
+                    <Link to={{ pathname: '/post' }}>
+                      <Icon name="ei-pencil" size="s" />
+                      <span className="desktop">Post</span>
+                    </Link>
+                    :
+                    <Link to={{ pathname: '/login', state: { retpath: window.location.pathname } }}>
+                      <Icon name="ei-user" size="s" />
+                      <span className="desktop">Login</span>
+                    </Link>
+                  }
+                </nav>
+              </>
+            }
           </div>
         </div>
         <section id="content">