fix funky rendering when logged in from a previous session

src/App.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { BrowserRouter, Navigate, Route, Routes} from 'react-router-dom';
 
 import './css/App.css';
@@ -16,34 +16,41 @@ import Admin from './pages/Admin';
 
 function App() {
 
-  const [user] = useLoginContext();
+  const [user, updateUser] = useLoginContext();
+  const [loading, setLoading] = useState(true);
   
   useEffect(() => {
-    fetchUser();
+    (async () => {
+      await fetchUser();
+      updateUser();
+      setLoading(false);
+    })();
   }, []);
 
   const menuItems = [
     { to: '/home', label: 'Home' },
     { to: '/users', label: 'Users' },
     { to: '/admin', label: 'Admin' }
-
   ];
 
+  if (loading) return null;
+
   return (
     <div className='app is-full-screen'>
       
-      <header className="card">
-        <UserControls />
-      </header>
-      
       <div className='background'>
 
           <BrowserRouter>
 
           {user ? 
+            <div>
+              <header className="card">
+                <UserControls />
+              </header>
               <Sidebar>
                 <SidebarMenu menuItems={menuItems} />
               </Sidebar>
+            </div>
             : null}
 
             <div className='main-content'>