Loaders and delete user confirmation

src/services/users/hooks/use-users.ts

@@ -1,12 +1,13 @@
 import { useDispatch, useSelector } from 'react-redux';
 import { getUsers, fetchUsers, fetchUserById, updateUserById, createUser, deleteUser } from '../redux';
-import { getUserById, getUserModalLoading } from '../redux/selectors';
+import { getUserById, getUserModalLoading, getUserslLoading } from '../redux/selectors';
 
 export function useUsers() {
   const dispatch = useDispatch();
   const users = useSelector(getUsers);
   const user = useSelector(getUserById);
   const userModalLoading = useSelector(getUserModalLoading);
+  const userTableLoading = useSelector(getUserslLoading);
 
   function loadUsers() {
     return dispatch(fetchUsers());
@@ -35,6 +36,7 @@ export function useUsers() {
     loadUsers,
     editUserById,
     userModalLoading,
+    userTableLoading,
     createNewUser,
     deleteUserById,
   };

src/services/users/redux/actions.ts

@@ -10,9 +10,26 @@ export enum UserActionTypes {
   CREATE_USER = 'users/create_user',
   DELETE_USER = 'users/delete_user',
   SET_USER_MODAL_LOADING = 'users/user_modal_loading',
+  SET_USERS_LOADING = 'users/users_loading',
 }
 
+export const setUsersLoading = (isLoading: boolean) => (dispatch: Dispatch<any>) => {
+  dispatch({
+    type: UserActionTypes.SET_USERS_LOADING,
+    payload: isLoading,
+  });
+};
+
+export const setUserModalLoading = (isLoading: boolean) => (dispatch: Dispatch<any>) => {
+  dispatch({
+    type: UserActionTypes.SET_USER_MODAL_LOADING,
+    payload: isLoading,
+  });
+};
+
 export const fetchUsers = () => async (dispatch: Dispatch<any>) => {
+  dispatch(setUsersLoading(true));
+
   try {
     const { data } = await performApiCall({
       path: '/users',
@@ -26,13 +43,8 @@ export const fetchUsers = () => async (dispatch: Dispatch<any>) => {
   } catch (err) {
     console.error(err);
   }
-};
 
-export const setUserModalLoading = (isLoading: boolean) => (dispatch: Dispatch<any>) => {
-  dispatch({
-    type: UserActionTypes.SET_USER_MODAL_LOADING,
-    payload: isLoading,
-  });
+  dispatch(setUsersLoading(false));
 };
 
 export const fetchUserById = (id: string) => async (dispatch: Dispatch<any>) => {

src/services/users/redux/reducers.ts

@@ -4,6 +4,7 @@ const initialUsersState: any = {
   users: [],
   user: {},
   userModalLoading: false,
+  usersLoading: false,
 };
 
 const usersReducer = (state: any = initialUsersState, action: any) => {
@@ -18,6 +19,11 @@ const usersReducer = (state: any = initialUsersState, action: any) => {
         ...state,
         userModalLoading: action.payload,
       };
+    case UserActionTypes.SET_USERS_LOADING:
+      return {
+        ...state,
+        usersLoading: action.payload,
+      };
     case UserActionTypes.FETCH_USER:
     case UserActionTypes.UPDATE_USER:
     case UserActionTypes.CREATE_USER:

src/services/users/redux/selectors.ts

@@ -3,3 +3,4 @@ import { State } from 'src/redux';
 export const getUsers = (state: State) => state.users.users;
 export const getUserById = (state: State) => state.users.user;
 export const getUserModalLoading = (state: State) => state.users.userModalLoading;
+export const getUserslLoading = (state: State) => state.users.usersLoading;

src/services/users/redux/types.ts

@@ -11,6 +11,7 @@ export interface UsersState {
   users: User[];
   user: User;
   userModalLoading: boolean;
+  usersLoading: boolean;
 }
 
 export interface CurrentUserUpdateAPI {