Merge pull request #56 from the-collab-lab/sc-issue-24

24. When the user refreshes or navigates around the app, the login page should not flash on the screen. An indictor should show the user that something is happening during wait times. #54

src/App.jsx

@@ -1,13 +1,19 @@
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-
-import { Home, Layout, List, ManageList, Err, Login } from './views';
-
-import { PublicRoute, PrivateRoute } from './components';
-
+import { lazy, Suspense } from 'react';
 import { useAuth, useSharedWithData } from './api';
-
 import { useShoppingListData, useShoppingLists } from './api';
 import { useStateWithStorage } from './utils';
+
+import Login from './views/Login';
+import PublicRoute from './components/PublicRoute';
+import { Spinner } from './components';
+
+const PrivateRoute = lazy(() => import('./components/PrivateRoute'));
+const Layout = lazy(() => import('./views/Layout'));
+const Home = lazy(() => import('./views/Home'));
+const List = lazy(() => import('./views/List'));
+const Err = lazy(() => import('./views/Err'));
+
 export function App() {
 	/**
 	 * This custom hook takes the path of a shopping list
@@ -22,7 +28,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, isAuthenticating } = useAuth();
 	const userId = user?.uid;
 	const userEmail = user?.email;
 	/**
@@ -38,54 +44,85 @@ export function App() {
 	const { data, loading, setLoading } = useShoppingListData(listPath);
 
 	const { sharedWith } = useSharedWithData(listPath);
-
+	if (isAuthenticating) {
+		return <Spinner />;
+	}
 	return (
 		<Router>
 			<Routes>
-				<Route element={<PublicRoute />}>
-					<Route path="/login" element={<Login />} />
+				<Route
+					element={
+						<Suspense fallback={<Spinner />}>
+							<PublicRoute />
+						</Suspense>
+					}
+				>
+					<Route
+						path="/login"
+						element={
+							<Suspense fallback={<Spinner />}>
+								<Login />
+							</Suspense>
+						}
+					/>
 				</Route>
-				<Route element={<PrivateRoute />}>
+				<Route
+					element={
+						<Suspense fallback={<Spinner />}>
+							<PrivateRoute />
+						</Suspense>
+					}
+				>
 					<Route
 						path="/"
 						element={
-							<Layout
-								data={lists}
-								setListPath={setListPath}
-								setLoading={setLoading}
-							/>
+							<Suspense fallback={<Spinner />}>
+								<Layout
+									data={lists}
+									setListPath={setListPath}
+									listPath={listPath}
+									setLoading={setLoading}
+								/>
+							</Suspense>
 						}
 					>
 						<Route
 							index
 							element={
-								<Home
-									data={lists}
-									setListPath={setListPath}
-									setLoading={setLoading}
-								/>
+								<Suspense fallback={<Spinner />}>
+									<Home
+										data={lists}
+										setListPath={setListPath}
+										setLoading={setLoading}
+									/>
+								</Suspense>
 							}
 						/>
 						<Route
 							path="/list"
 							element={
-								<List
-									data={data}
-									listPath={listPath}
-									lists={lists}
-									sharedWith={sharedWith}
-									loading={loading}
-									setLoading={setLoading}
-								/>
+								<Suspense fallback={<Spinner />}>
+									<List
+										data={data}
+										listPath={listPath}
+										lists={lists}
+										sharedWith={sharedWith}
+										loading={loading}
+										setLoading={setLoading}
+									/>
+								</Suspense>
 							}
 						/>
-						<Route
-							path="/manage-list"
-							element={<ManageList listPath={listPath} data={data} />}
-						/>
 					</Route>
 				</Route>
-				<Route path="*" element={<Err />} />
+				<Route
+					path="*"
+					element={
+						<Suspense fallback={<Spinner />}>
+							<Err />
+						</Suspense>
+					}
+				/>
 			</Routes>
 		</Router>
 	);

src/api/useAuth.jsx

@@ -96,15 +96,36 @@ export const SignOutButton = () => {
  */
 export const useAuth = () => {
 	const [user, setUser] = useState(null);
-
+	const [isAuthenticating, setIsAuthenticating] = useState(true); // Add loading state
+
 	useEffect(() => {
 		auth.onAuthStateChanged((user) => {
+			setIsAuthenticating(false);
+			setUser(user);
+			if (user) {
+				addUserToDatabase(user);
+			}
+		});
+	}, []);
+
+	return { user, isAuthenticating };
+};
+
+export const useAuth2 = () => {
+	const [user, setUser] = useState(null);
+	const [isLoading, setIsLoading] = useState(true); // Add loading state
+
+	useEffect(() => {
+		const unsubscribe = auth.onAuthStateChanged((user) => {
 			setUser(user);
+			setIsLoading(false); // Set loading to false once authentication state is resolved
 			if (user) {
 				addUserToDatabase(user);
 			}
 		});
+
+		return () => unsubscribe(); // Unsubscribe when component unmounts
 	}, []);
-  
-	return { user };
-};
+
+	return { user, isLoading }; // Return loading state along with user object
+};

src/components/PrivateRoute.jsx

@@ -1,8 +1,8 @@
 import { Outlet } from 'react-router-dom';
 import { useAuth } from '../api';
-import { Login } from '../views';
+import Login from '../views/Login';
 
-export function PrivateRoute() {
+export default function PrivateRoute() {
 	const { user } = useAuth();
 	return user ? <Outlet /> : <Login />;
 }

src/components/PublicRoute.jsx

@@ -1,8 +1,8 @@
 import { Outlet } from 'react-router-dom';
 import { useAuth } from '../api';
-import { Login } from '../views';
+import Login from '../views/Login';
 
-export function PublicRoute() {
+export default function PublicRoute() {
 	const { user } = useAuth();
 	return !user ? <Login /> : <Outlet />;
 }

src/components/SingleList.jsx

@@ -61,4 +61,4 @@ export function SingleList({ name, path, setListPath, setLoading }) {
 			</button>
 		</li>
 	);
-}
+}

src/views/Err.jsx

@@ -1,7 +1,7 @@
 import { NavLink } from 'react-router-dom';
 import Logo from '../assets/Logo.jsx';
 
-export function Err() {
+export default function Err() {
 	return (
 		<div className="flex my-auto h-screen bg-[url('assets/lightContrastGraph.png')] bg-cover xsm:p-4">
 			<div className="m-auto">

src/views/Home.jsx

@@ -2,7 +2,7 @@ import { SingleList } from '../components/SingleList';
 import AddList from '../components/AddList.jsx';
 import { useAuth } from '../api/useAuth.jsx';
 
-export function Home({ data, setListPath, setLoading }) {
+export default function Home({ data, setListPath, setLoading }) {
 	const { user } = useAuth();
 	return (
 		<div>

src/views/Layout.jsx

@@ -1,13 +1,12 @@
 import { Outlet } from 'react-router-dom';
 import NavigationBar from '../components/NavigationBar.jsx';
 
-export function Layout({ data, setListPath, setLoading }) {
+export default function Layout({ data, setListPath, setLoading }) {
 	const mainContentMargin = 'xsm:ml-24 sm:ml-36 md:ml-48 lg:ml-64';
 
 	return (
 		<>
 			<div className={`flex xsm:text-sm sm:text-md md:text-lg`}>
-				{/* Sidebar just below-16*/}
 				<NavigationBar
 					data={data}
 					setListPath={setListPath}
@@ -18,7 +17,6 @@ export function Layout({ data, setListPath, setLoading }) {
 					className={`min-h-screen flex-grow bg-appBg p-2 ${mainContentMargin} md:p-6 pb-12`}
 				>
 					<Outlet />
-					{/* Modal for inviting friends */}
 				</main>
 			</div>
 		</>

src/views/List.jsx

@@ -11,7 +11,7 @@ import { useAuth } from '../api';
 import { IoMailOutline } from 'react-icons/io5';
 import { FaRegCircleUser } from 'react-icons/fa6';
 
-export function List({ data, listPath, lists, loading }) {
+export default function List({ data, listPath, lists, loading }) {
 	const [search, setSearch] = useState('');
 	const [listName, setListName] = useState('');
 	const [toggleModal, setToggleModal] = useState(false);

src/views/Login.jsx

@@ -1,7 +1,7 @@
 import { SignInButton } from '../api/useAuth';
 import Logo from '../assets/Logo.jsx';
 
-export function Login() {
+export default function Login() {
 	return (
 		<div className="flex my-auto h-screen bg-[url('assets/lightestContrastGraph.png')] bg-cover xsm:p-4">
 			<div className="m-auto">