Feature: loading skeloteon for My Reseravtion page

src/App.js

@@ -29,15 +29,15 @@ const App = () => (
                 <LoginStyle>
                   <Login />
                 </LoginStyle>
-                )}
+              )}
             />
             <Route
               path="/register"
               element={(
                 <LoginStyle>
                   <Register />
                 </LoginStyle>
-                )}
+              )}
             />
             <Route element={<RequireAuth />}>
               <Route
@@ -47,23 +47,23 @@ const App = () => (
                   <CenterContainer>
                     <Aeroplanes />
                   </CenterContainer>
-                  )}
+                )}
               />
               <Route
                 path="/details"
                 element={(
                   <CenterContainer>
                     <AeroPlaneDetails />
                   </CenterContainer>
-                  )}
+                )}
               />
               <Route
                 path="/reservations"
                 element={(
                   <CenterContainer>
                     <Reservations />
                   </CenterContainer>
-                  )}
+                )}
               />
 
               <Route
@@ -72,7 +72,7 @@ const App = () => (
                   <CenterContainer>
                     <Reserve />
                   </CenterContainer>
-                  )}
+                )}
               />
 
               <Route
@@ -81,15 +81,15 @@ const App = () => (
                   <CenterContainer>
                     <AddAeroplane />
                   </CenterContainer>
-                  )}
+                )}
               />
               <Route
                 path="/delete_aeroplane"
                 element={(
                   <CenterContainer>
                     <DeleteAeroplane />
                   </CenterContainer>
-                  )}
+                )}
               />
             </Route>
           </Routes>

src/components/Login.js

@@ -3,7 +3,6 @@ import React, {
 } from 'react';
 import { Link, useNavigate, useLocation } from 'react-router-dom';
 import axios from '../api/axios';
-
 import AuthContext from '../context/AuthProvider';
 
 const LOGIN_URL = '/login';

src/components/Navigation.js

@@ -1,10 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import { NavLink, useNavigate } from 'react-router-dom';
+import toast from 'react-hot-toast';
 import { useNavigation } from './NavigationContext';
 import logo from '../assets/app-logo.png';
 import NavFooter from './NavFooter';
 import useAuth from '../hooks/useAuth';
 import axios from '../api/axios';
+
 import NavBarMobile from './NavBarMobile';
 
 const Navigation = () => {
@@ -26,7 +28,9 @@ const Navigation = () => {
             'Content-Type': 'application/json',
           },
         });
+        toast.success('Logout Successfully');
       } catch (err) {
+        toast.error('Opps😥 failed To logout');
         throw Error(err);
       }
     }

src/components/Reservations.js

@@ -2,33 +2,38 @@ import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { fetchReservedAeroplanes } from '../redux/aeroplanes/aeroplanesActions';
 import ReservationCard from './ReservationCard';
+import ReserveCardLoading from './ReserveCardLoading';
 
 const Reservations = () => {
   const dispatch = useDispatch();
   const userAeroplanes = useSelector((state) => state.reservations.reservation);
-  const loading = useSelector((state) => state.aeroplanes.reservedAeroplanesLoading);
-  const error = useSelector((state) => state.aeroplanes.reservedAeroplanesError);
+  const loading = useSelector((state) => state.reservations.loading);
+  const error = useSelector(
+    (state) => state.aeroplanes.reservedAeroplanesError,
+  );
   useEffect(() => {
     dispatch(fetchReservedAeroplanes());
   }, [dispatch]);
 
   if (loading) {
-    return <p>Loading</p>;
+    return <ReserveCardLoading />;
   }
 
   if (error) {
     return (
-
       <div className="d-flex justify-content-center align-items-center">
-
         <p>Something went wrong</p>
       </div>
     );
   }
 
   const aeroplaneCards = userAeroplanes.map((aeroplane, index) => (
     <div className="col-lg-6 col-12 mb-4" key={aeroplane.id}>
-      <ReservationCard aeroplane={aeroplane} index={index} style={{ marginRight: '40px' }} />
+      <ReservationCard
+        aeroplane={aeroplane}
+        index={index}
+        style={{ marginRight: '40px' }}
+      />
     </div>
   ));
 
@@ -38,9 +43,7 @@ const Reservations = () => {
         <h3 className="fw-normal"> Reservations</h3>
       </div>
       {userAeroplanes && userAeroplanes.length > 0 ? (
-        <div className="row">
-          { aeroplaneCards }
-        </div>
+        <div className="row">{aeroplaneCards}</div>
       ) : (
         <div className="d-flex justify-content-center align-items-center">
           <p>No reserved aeroplanes found.</p>

src/components/ReserveCardLoading.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import ReservationCardLoading from '../ui/reservationCardLoading';
+
+const ReserveCardLoading = () => (
+  <div className="row container">
+    <div className="col-lg-6 col-12 mb-4">
+      <ReservationCardLoading />
+    </div>
+    <div className="col-lg-6 col-12 mb-4">
+      <ReservationCardLoading />
+    </div>
+    <div className="col-lg-6 col-12 mb-4">
+      <ReservationCardLoading />
+    </div>
+    <div className="col-lg-6 col-12 mb-4">
+      <ReservationCardLoading />
+    </div>
+  </div>
+);
+
+export default ReserveCardLoading;

src/index.css

@@ -42,6 +42,7 @@ html {
 }
 
 section {
+  margin-top: 70px;
   width: 100%;
   max-width: 420px;
   min-height: 400px;
@@ -284,6 +285,14 @@ button {
   border-radius: 0.125rem;
 }
 
+.skeleton-card {
+  width: 320px;
+  height: 2rem;
+  margin-top: 0.25rem;
+  margin-bottom: 0.2rem;
+  border-radius: 0.125rem;
+}
+
 @keyframes skeleton-loading {
   0% {
     background-color: hsl(200, 13%, 42%);

src/redux/reservations/reservationSlice.js

@@ -54,10 +54,12 @@ const reservationSlice = createSlice({
       .addCase(fetchReservedAeroplanes.pending, (state) => {
         state.loading = true;
       })
-
       .addCase(fetchReservedAeroplanes.fulfilled, (state, action) => {
         state.loading = false;
         state.reservation = action.payload;
+      })
+      .addCase(fetchReservedAeroplanes.rejected, (state) => {
+        state.loading = false;
       });
   },
 });

src/ui/reservationCardLoading.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const ReservationCardLoading = () => (
+  <li style={{ width: '17rem' }} className="list-group-item">
+    <p className=" skeleton skeleton-card" />
+    <p className=" skeleton  skeleton-card" />
+    <p className=" skeleton  skeleton-card" />
+    <p className=" skeleton  skeleton-card" />
+    <p className=" skeleton  skeleton-card" />
+    <p className=" skeleton  skeleton-card" />
+    <p className=" skeleton  skeleton-card" />
+  </li>
+);
+
+export default ReservationCardLoading;