Loaders and delete user confirmation

src/modules/users/Users.tsx

@@ -4,17 +4,15 @@ import { SearchIcon, PlusIcon } from '@heroicons/react/solid';
 import { CogIcon, TrashIcon } from '@heroicons/react/outline';
 import { useUsers } from 'src/services/users';
 import { Table } from 'src/components';
-import { ConfirmationModal } from 'src/components/Modal';
 import { debounce } from 'lodash';
 import { UserModal } from './components/UserModal';
 
 export const Users: React.FC = () => {
   const [selectedRowsIds, setSelectedRowsIds] = useState({});
-  const [deleteModal, setDeleteModal] = useState(false);
   const [configureModal, setConfigureModal] = useState(false);
   const [userId, setUserId] = useState(null);
   const [search, setSearch] = useState('');
-  const { users, loadUsers } = useUsers();
+  const { users, loadUsers, userTableLoading } = useUsers();
 
   const handleSearch = (event: any) => {
     setSearch(event.target.value);
@@ -34,9 +32,6 @@ export const Users: React.FC = () => {
     return users.filter((item: any) => item.email?.toLowerCase().includes(search.toLowerCase()));
   }, [search, users]);
 
-  const deleteModalOpen = () => setDeleteModal(true);
-  const deleteModalClose = () => setDeleteModal(false);
-
   const configureModalOpen = (id: any) => {
     setUserId(id);
     setConfigureModal(true);
@@ -132,7 +127,7 @@ export const Users: React.FC = () => {
           {selectedRowsIds && Object.keys(selectedRowsIds).length !== 0 && (
             <div className="flex items-center">
               <button
-                onClick={deleteModalOpen}
+                onClick={() => {}}
                 type="button"
                 className="inline-flex items-center px-4 py-2 text-sm font-medium rounded-md text-red-700 bg-red-50 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
               >
@@ -147,19 +142,17 @@ export const Users: React.FC = () => {
           <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
             <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
               <div className="shadow border-b border-gray-200 sm:rounded-lg overflow-hidden">
-                <Table data={filterSearch as any} columns={columns} getSelectedRowIds={selectedRows} selectable />
+                <Table
+                  data={filterSearch as any}
+                  columns={columns}
+                  getSelectedRowIds={selectedRows}
+                  loading={userTableLoading}
+                />
               </div>
             </div>
           </div>
         </div>
 
-        <ConfirmationModal
-          open={deleteModal}
-          onClose={deleteModalClose}
-          title="Delete user"
-          body="Are you sure you want to delete this user? All of your data will be permanently removed. This action cannot be undone."
-        />
-
         <UserModal open={configureModal} onClose={configureModalClose} userId={userId} />
       </div>
     </div>