Merge branch 'main' into dialogs

Author: borjaMarti

src/App.jsx

@@ -26,7 +26,7 @@ export function App() {
 	 * This custom hook holds info about the current signed in user.
 	 * Check ./api/useAuth.jsx for its implementation.
 	 */
-	const { user } = useAuth();
+	const { user, isLoadingUser } = useAuth();
 	const userId = user?.uid;
 	const userEmail = user?.email;
 
@@ -45,7 +45,17 @@ export function App() {
 	return (
 		<Router>
 			<Routes>
-				<Route path="/" element={<Layout listPath={listPath} lists={lists} />}>
+				<Route
+					path="/"
+					element={
+						<Layout
+							listPath={listPath}
+							lists={lists}
+							user={user}
+							isLoadingUser={isLoadingUser}
+						/>
+					}
+				>
 					<Route
 						index
 						element={

src/api/useAuth.jsx

@@ -34,15 +34,18 @@ export const SignOut = () => {
  */
 export const useAuth = () => {
 	const [user, setUser] = useState(null);
+	const [isLoadingUser, setIsLoadingUser] = useState(false);
 
 	useEffect(() => {
+		setIsLoadingUser(true);
 		auth.onAuthStateChanged((user) => {
+			setIsLoadingUser(false);
 			setUser(user);
 			if (user) {
 				addUserToDatabase(user);
 			}
 		});
 	}, []);
 
-	return { user };
+	return { user, isLoadingUser };
 };

src/views/Layout.jsx

@@ -1,11 +1,10 @@
 import { Outlet } from 'react-router-dom';
-import { SignIn, useAuth } from '../api/useAuth.jsx';
+import { SignIn } from '../api/useAuth.jsx';
 import { NavBar } from '../components/NavBar/NavBar.jsx';
 import Groceries from '../assets/groceries.png';
+import Loading from '../components/Loading.jsx';
 
-export function Layout({ lists, listPath }) {
-	const { user } = useAuth();
-
+export function Layout({ lists, listPath, user, isLoadingUser }) {
 	const handleClickSignIn = () => {
 		SignIn();
 	};
@@ -14,7 +13,9 @@ export function Layout({ lists, listPath }) {
 		<div className="w-screen flex flex-col text-poppins min-w-96 bg-puurWhite">
 			<NavBar user={user} lists={lists} listPath={listPath} />
 			<main className="min-h-screen w-full lg:pt-16 xl:w-9/12  xl:mx-auto">
-				{!!user ? (
+				{isLoadingUser ? (
+					<Loading />
+				) : !!user ? (
 					<Outlet />
 				) : (
 					<div className="flex flex-col justify-items-center	pt-12 lg:justify-between lg:m-20 lg:pt-0 lg:flex-row">