added loading indicator component and tests folder to config file

client/src/App.tsx

@@ -3,13 +3,14 @@ import Navbar from "./components/Navbar";
 import Home from "./pages/Home";
 import Account from "./pages/Account";
 import Landing from "./pages/Landing";
+import Loading from "./components/Loading";
 import { useAuth0 } from "@auth0/auth0-react";
 
 function App() {
   const { isAuthenticated, isLoading } = useAuth0();
 
   if (isLoading) {
-    return <div>Loading...</div>;
+    return <Loading />;
   }
 
   return (

client/src/components/Loading.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+const Loading: React.FC = () => {
+  return (
+    <div className="fixed inset-0 flex justify-center items-center z-50">
+      <div className="w-16 h-16 border-4 border-t-4 border-t-blue-500 border-gray-200 rounded-full animate-spin"></div>
+    </div>
+  );
+};
+
+export default Loading;

client/src/components/Profile.tsx

@@ -2,21 +2,23 @@ import React from "react";
 import { useAuth0 } from "@auth0/auth0-react";
 
 const Profile: React.FC = () => {
-  const { user, isAuthenticated, isLoading } = useAuth0();
-
-  if (isLoading) {
-    return <div>Loading ...</div>;
-  }
+  const { user, isAuthenticated } = useAuth0();
 
   return (
     isAuthenticated && user ? (
-      <div>
-        <img src={user.picture} alt={user.name} />
-        <h2>{user.nickname}</h2>
-        <p>{user.email}</p>
+      <div className="text-center mt-32">
+        <img
+          src={user.picture}
+          alt={user.name}
+          className="rounded-full h-24 w-24 mx-auto mb-4"
+        />
+        <h2 className="text-xl font-bold">{user.nickname}</h2>
+        <p className="text-sm">{user.email}</p>
       </div>
     ) : (
-      <div>User not authenticated</div>
+      <div className="text-center mt-1/4">
+        <p className="text-xl font-bold">User not authenticated</p>
+      </div>
     )
   );
 };

client/tsconfig.json

@@ -21,6 +21,6 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src", "./jest.setup.ts", "tests/Navbar.spec.tsx"],
+  "include": ["src", "./jest.setup.ts", "tests/**/*"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }