Now loading user in a wrapper for the app, added loading screen

src/app/AuthHTTPWrapper.tsx

@@ -2,23 +2,17 @@ import { Auth0Provider } from '@auth0/auth0-react'
 import { or } from '../utils/types'
 import AuthWrapper from '../providers/auth'
 import HTTPProvider from '../providers/http'
-import App from './App'
 import { useState } from 'react'
+import LoadingScreen from './LoadingScreen'
+import UserWrapper from './UserWrapper'
 
 function AuthHTTPWrapper() {
   const [token, setToken] = useState<string | undefined>(undefined)
 
-  let url: string | undefined = window.location.origin;
-  let audience: string | undefined;
-  if (window.location.origin === "https://staging.brandxtech.ca") {
-    url = import.meta.env.VITE_AUTH0_CLIENT_STAGING_DOMAIN;
-    audience = import.meta.env.VITE_AUTH0_STAGING_AUDIENCE;
-  } else {
-    url = import.meta.env.VITE_AUTH0_CLIENT_DOMAIN;
-    audience = import.meta.env.VITE_AUTH0_AUDIENCE;
-  }
+  let url: string | undefined = import.meta.env.VITE_AUTH0_CLIENT_DOMAIN;
+  let audience: string | undefined = import.meta.env.VITE_AUTH0_AUDIENCE;
 
-  let client_id = import.meta.env.VITE_AUTH0_BXT_CLIENT_ID;
+  let client_id = import.meta.env.VITE_AUTH0_DEV_CLIENT_ID;
 
   return (
     <Auth0Provider
@@ -34,10 +28,12 @@ function AuthHTTPWrapper() {
       <AuthWrapper setToken={setToken}>
         { token ? 
           <HTTPProvider token={token}>
-            <App/>
+            <UserWrapper/>
           </HTTPProvider>
         :
-          <p>no token</p>
+          <LoadingScreen
+            message='Loading user profile'
+          />
         }
       </AuthWrapper>
     </Auth0Provider>

src/app/LoadingScreen.tsx

@@ -0,0 +1,23 @@
+import { CircularProgress, Typography } from "@mui/material";
+
+interface Props {
+    message?: string;
+}
+
+export default function LoadingScreen(props: Props) {
+
+    const { message } = props;
+
+    return (
+        <>
+            <CircularProgress
+                size={125}
+                style={{ marginBottom: 24 }}
+            />
+            <br/>
+            <Typography variant="h6">
+                {message ? message : "Loading..."}
+            </Typography>
+        </>
+    );
+}

src/app/UserWrapper.tsx

@@ -5,13 +5,15 @@ import './App.css'
 import { useUserAPI } from '../providers/pond/userAPI'
 import { useAuth0 } from '@auth0/auth0-react'
 import { or } from '../utils/types'
+import LoadingScreen from './LoadingScreen'
 
-function App() {
+export default function UserWrapper() {
   const [count, setCount] = useState(0)
   const [loading, setLoading] = useState(false)
   const userAPI = useUserAPI();
   const useAuth = useAuth0();
   const hasFetched = useRef(false);
+  const [user, setUser] = useState<any | undefined>(undefined)
 
   let user_id = or(useAuth.user?.sub, "")
 
@@ -19,9 +21,10 @@ function App() {
     // if (loading) return;
     if (hasFetched.current) return;
     setLoading(true)
-    console.log("send")
+    // console.log("send")
     userAPI.getUser(user_id).then(resp => {
-        console.log(resp)
+        // console.log(resp)
+        setUser(resp)
     }).finally(() => {
         setLoading(false)
         hasFetched.current = true;
@@ -33,6 +36,12 @@ function App() {
     loadUser()
   }, [loading])
 
+  if (!user || loading) return (
+    <LoadingScreen
+      message={"Loading user profile..."}
+    />
+  )
+
   return (
     <><div>
         <a href="https://vitejs.dev" target="_blank">
@@ -55,6 +64,4 @@ function App() {
         </p>
     </>
   )
-}
-
-export default App
+}