Merge pull request #72 from the-collab-lab/sign-loading

Loading after sign in

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/components/Loading.css

@@ -18,7 +18,7 @@
 .spinner {
  width: 5rem; /* 1 */
  padding: 0.5rem; /* 2 */
- background: var(--color-accent); /* 3 */
+ background: #6966a8; /* 3 */
 
  aspect-ratio: 1;
  border-radius: 50%;

src/views/Layout.jsx

@@ -1,12 +1,10 @@
 import { Outlet } from 'react-router-dom';
-import { auth } from '../api/config.js';
-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();
  };
@@ -15,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="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">