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

src/app/UserWrapper.tsx

@@ -0,0 +1,67 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import reactLogo from '../assets/react.svg'
+import viteLogo from '/vite.svg'
+import './App.css'
+import { useUserAPI } from '../providers/pond/userAPI'
+import { useAuth0 } from '@auth0/auth0-react'
+import { or } from '../utils/types'
+import LoadingScreen from './LoadingScreen'
+
+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, "")
+
+  const loadUser = useCallback(() => {
+    // if (loading) return;
+    if (hasFetched.current) return;
+    setLoading(true)
+    // console.log("send")
+    userAPI.getUser(user_id).then(resp => {
+        // console.log(resp)
+        setUser(resp)
+    }).finally(() => {
+        setLoading(false)
+        hasFetched.current = true;
+    })
+  }, [])
+  
+  useEffect(() => {
+    if (loading) return;
+    loadUser()
+  }, [loading])
+
+  if (!user || loading) return (
+    <LoadingScreen
+      message={"Loading user profile..."}
+    />
+  )
+
+  return (
+    <><div>
+        <a href="https://vitejs.dev" target="_blank">
+            <img src={viteLogo} className="logo" alt="Vite logo" />
+        </a>
+        <a href="https://react.dev" target="_blank">
+            <img src={reactLogo} className="logo react" alt="React logo" />
+        </a>
+      </div>
+      <h1>Vite + React</h1>
+      <div className="card">
+        <button onClick={() => setCount((count) => count + 1)}>
+            count is {count}
+        </button>
+        <p>
+            The new Adaptive App
+        </p>
+        </div><p className="read-the-docs">
+            Coming soon
+        </p>
+    </>
+  )
+}