edit

src/components/App.jsx

@@ -17,15 +17,14 @@ const ContactsPage = lazy(() => import('../pages/Contacts'));
 
 function App() {
   const dispatch = useDispatch();
-
   const { isRefreshing } = useAuth();
 
   useEffect(() => {
     dispatch(refreshUser());
   }, [dispatch]);
 
-  return isRefreshing ? (
-    <Loader />
+  return isRefreshing ? ( // if isRefreshing is true, then render Loader, else render Container
+    <Loader /> // Loader - spinner
   ) : (
     <Container>
       <Routes>

src/components/Layout.jsx

@@ -15,10 +15,8 @@ export const Layout = () => {
         position="top-center"
         toastOptions={{
           duration: 4000,
-
           // Custom Icon
           icon: '🤬',
-
           // Styling
           style: {
             color: '#fa0000',

src/components/PrivateRoute.jsx

@@ -2,8 +2,8 @@ import { Navigate } from 'react-router-dom';
 
 import { useAuth } from './hooks';
 
-export const PrivateRoute = ({ component: Component, redirectTo = '/' }) => {
-  const { isLoggedIn, isRefreshing } = useAuth();
-  const shouldRedirect = !isLoggedIn && !isRefreshing;
-  return shouldRedirect ? <Navigate to={redirectTo} /> : Component;
+export const PrivateRoute = ({ component: Component, redirectTo = '/' }) => { // component - ContactsPage
+  const { isLoggedIn, isRefreshing } = useAuth(); // isLoggedIn - true or false
+  const shouldRedirect = !isLoggedIn && !isRefreshing; // if isLoggedIn is false and isRefreshing is false, then shouldRedirect is true
+  return shouldRedirect ? <Navigate to={redirectTo} /> : Component; // if shouldRedirect is true, then redirect to redirectTo, else render Component
 };

src/components/RestrictedRoute.jsx

@@ -3,6 +3,7 @@ import { Navigate } from 'react-router-dom';
 import { useAuth } from './hooks';
 
 export const RestrictedRoute = ({ component: Component, redirectTo = '/' }) => {
-  const { isLoggedIn } = useAuth();
-  return isLoggedIn ? <Navigate to={redirectTo} /> : Component;
+  // component - RegisterPage or LoginPage
+  const { isLoggedIn } = useAuth(); // isLoggedIn - true or false
+  return isLoggedIn ? <Navigate to={redirectTo} /> : Component; // if isLoggedIn is true, then redirect to redirectTo, else render Component
 };