diff --git a/ui/src/app/admin/component/UserMaintenance.js b/ui/src/app/admin/component/UserMaintenance.js
index cf083e6b3..45b6d7acb 100644
--- a/ui/src/app/admin/component/UserMaintenance.js
+++ b/ui/src/app/admin/component/UserMaintenance.js
@@ -12,12 +12,15 @@ import { useCurrentUser } from '../../core/user/UserContext';
 
 import { GroupsProvider } from '../hoc/GroupsProvider';
 import { useTranslator } from '../../i18n/hooks';
+import Spinner from '../../core/components/Spinner';
 
-export default function UserMaintenance({ users, roles, loading, onDeleteUser, onChangeUserRole, onChangeUserGroup }) {
+export default function UserMaintenance({ users, roles, loading, onDeleteUser, onChangeUserRole, onChangeUserGroup, updating = [] }) {
 
     const currentUser = useCurrentUser();
     const translator = useTranslator();
 
+    const isUpdating = React.useCallback((username) => updating.find(u => u === username), [updating]);
+
     return (
         <div className="table-responsive mt-3 provider-list">
             <table className="table table-striped w-100 table-hover">
@@ -41,19 +44,26 @@ export default function UserMaintenance({ users, roles, loading, onDeleteUser, o
                                         <td className="align-middle">{user.firstName} {user.lastName}</td>
                                         <td className="align-middle">{user.emailAddress}</td>
                                         <td className="align-middle">
-                                            <label htmlFor={`role-${user.username}`} className="sr-only"><Translate value="action.user-role">User role</Translate></label>
-                                            <Form.Select
-                                                id={`role-${user.username}`}
-                                                name={`role-${user.username}`}
-                                                className="form-control"
-                                                onChange={(event) => onChangeUserRole({user, role: event.target.value})}
-                                                defaultValue={user.role}
-                                                disabled={loading || currentUser.username === user.username}
-                                                disablevalidation="true">
-                                                {roles.map((role, ridx) => (
-                                                    <option key={role} value={role}>{role}</option>
-                                                ))}
-                                            </Form.Select>
+                                            <span className="d-flex align-items-center">
+                                                <label htmlFor={`role-${user.username}`} className="sr-only">
+                                                    <Translate value="action.user-role">User role</Translate>
+                                                </label>
+                                                <Form.Select
+                                                    id={`role-${user.username}`}
+                                                    name={`role-${user.username}`}
+                                                    className="form-control"
+                                                    onChange={(event) => onChangeUserRole({user, role: event.target.value})}
+                                                    value={user.role}
+                                                    disabled={ isUpdating(user.username) || loading || currentUser.username === user.username}
+                                                    disablevalidation="true">
+                                                    {roles.map((role, ridx) => (
+                                                        <option key={role} value={role}>{role}</option>
+                                                    ))}
+                                                </Form.Select>
+                                                <span className={`${isUpdating(user.username) ? 'visible' : 'invisible' } d-flex justify-content-center text-primary ms-2`}>
+                                                    <Spinner size="1x" />
+                                                </span>
+                                            </span>
                                         </td>
                                         <td className="align-middle">
                                             <OverlayTrigger
diff --git a/ui/src/app/admin/container/UserManagement.js b/ui/src/app/admin/container/UserManagement.js
index 40545b1a2..0dd84a099 100644
--- a/ui/src/app/admin/container/UserManagement.js
+++ b/ui/src/app/admin/container/UserManagement.js
@@ -9,10 +9,13 @@ import Button from 'react-bootstrap/Button';
 import Translate from '../../i18n/components/translate';
 import API_BASE_PATH from '../../App.constant';
 import { useRemoveUserMutation, useSetUserGroupRequestMutation, useSetUserRoleRequestMutation } from '../../store/user/UserSlice';
+import { cloneDeep } from 'lodash';
 
-export default function UserManagement({ users, children, reload}) {
+export default function UserManagement({ users = [], children, reload}) {
 
     const [roles, setRoles] = React.useState([]);
+    const [updating, setUpdating] = React.useState([]);
+    const [cloned, setCloned] = React.useState(cloneDeep(users));
 
     const { get, response, loading } = useFetch(`${API_BASE_PATH}`, {});
 
@@ -27,6 +30,12 @@ export default function UserManagement({ users, children, reload}) {
     const [setUserRoleRequest] = useSetUserRoleRequestMutation();
     const [deleteUserRequest] = useRemoveUserMutation();
 
+    const onChangeUserRole = React.useCallback(async ({ user, role }) => {
+        setUpdating([...updating, user.username]);
+        Object.assign(user, {role});
+        setUserRoleRequest({ user, role }).unwrap().then(() => setUpdating(updating.filter(u => u !== user.username)));
+    }, [updating, setUserRoleRequest]);
+
 
     /*eslint-disable react-hooks/exhaustive-deps*/
     React.useEffect(() => {
@@ -40,9 +49,13 @@ export default function UserManagement({ users, children, reload}) {
         setDeleting(null);
     };
 
+    React.useEffect(() => {
+        setCloned(cloneDeep(users));
+    }, [users]);
+
     return (
         <div className="user-management">
-            {children(users, roles, setUserRoleRequest, setUserGroupRequest, (id) => setDeleting(id), loading)}
+            {children(cloned, roles, onChangeUserRole, setUserGroupRequest, (id) => setDeleting(id), loading, updating)}
             <Modal show={!!deleting} onHide={() => setDeleting(null)}>
                 <Modal.Header><Translate value="message.delete-user-title">Delete User?</Translate></Modal.Header>
                 <Modal.Body className="d-flex align-content-center">
diff --git a/ui/src/app/dashboard/view/AdminTab.js b/ui/src/app/dashboard/view/AdminTab.js
index 01f5271c9..a5b3f8ba8 100644
--- a/ui/src/app/dashboard/view/AdminTab.js
+++ b/ui/src/app/dashboard/view/AdminTab.js
@@ -22,13 +22,14 @@ export function AdminTab () {
                 </div>
                 <div className="p-3">
                     <UserManagement users={users}>
-                        {(u, roles, onChangeUserRole, onChangeUserGroup, onDeleteUser, loading) =>
+                        {(u, roles, onChangeUserRole, onChangeUserGroup, onDeleteUser, loading, updating) =>
                             <UserMaintenance users={ u }
                                 roles={roles}
                                 loading={loading}
                                 onChangeUserRole={onChangeUserRole}
                                 onDeleteUser={onDeleteUser}
-                                onChangeUserGroup={onChangeUserGroup} />}
+                                onChangeUserGroup={onChangeUserGroup}
+                                updating={updating} />}
                         
                     </UserManagement>
                     {loading && <div className="d-flex justify-content-center text-primary"><Spinner size="4x" /></div> }