add loader

MargoMarm · Sep 28, 2023 · 6828f4d · 6828f4d
1 parent af2d527
commit 6828f4d
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git a/src/components/Lodaer/Loader.jsx b/src/components/Lodaer/Loader.jsx
@@ -1,5 +1,6 @@
 import { Puff } from 'react-loader-spinner';
-const Loader = ({ size }) => {
+
+const Loader = ({ size, needToCenter }) => {
   return (
     <Puff
       height={size}
@@ -10,6 +11,8 @@ const Loader = ({ size }) => {
       wrapperStyle={{
         display: 'flex',
         justifyContent: 'center',
+        alignItems: 'center',
+        minHeight: needToCenter ? '100vh' : null,
         margin: '20px auto 0 auto',
       }}
       wrapperClass=""

diff --git a/src/components/SharedLayout/SharedLayout.jsx b/src/components/SharedLayout/SharedLayout.jsx
@@ -8,7 +8,7 @@ const SharedLayout = () => {
   return (
     <Container>
       <Header />
-      <Suspense fallback={<Loader />}>
+      <Suspense fallback={<Loader needToCenter/>}>
         <Outlet />
       </Suspense>
     </Container>

diff --git a/src/redux/auth/slice.js b/src/redux/auth/slice.js
@@ -62,8 +62,10 @@ export const authSlice = createSlice({
       state.error = null;
     });
     builder.addCase(logInUser.rejected, (state, action) => {
-		 state.error = action.payload;
-		 Notify.failure("Oops... Something went wrong! Enter correct email or password")
+      state.error = action.payload;
+      Notify.failure(
+        'Oops... Something went wrong! Enter correct email or password',
+      );
     });
 
     builder.addCase(logOutUser.fulfilled, state => {
@@ -89,12 +91,18 @@ export const authSlice = createSlice({
       state.isLoggedIn = true;
       state.error = null;
       state.isRefreshing = false;
+      Loading.remove();
     });
     builder.addCase(fetchCurrentUser.rejected, state => {
       state.isRefreshing = false;
+      Loading.remove();
     });
     builder.addCase(fetchCurrentUser.pending, state => {
       state.isRefreshing = true;
+      Loading.standard({
+        svgColor: '#E6533C',
+        backgroundColor: '#040404',
+      });
     });
 
     //Update user data
@@ -105,7 +113,7 @@ export const authSlice = createSlice({
       replaceUserState(state, payload);
       state.error = null;
       Loading.remove();
-      Notify.success('Your details have been updated');
+      Notify.success('Your details have been successfully updated');
     });
     builder.addCase(updateUserData.rejected, (state, action) => {
       state.error = action.payload;