diff --git a/app/client/src/pages/organization/OrgInviteUsersForm.tsx b/app/client/src/pages/organization/OrgInviteUsersForm.tsx index 115d8899de..aeaa176554 100644 --- a/app/client/src/pages/organization/OrgInviteUsersForm.tsx +++ b/app/client/src/pages/organization/OrgInviteUsersForm.tsx @@ -13,6 +13,7 @@ import { getAllUsers, getCurrentOrg, } from "selectors/organizationSelectors"; +import Spinner from "components/editorComponents/Spinner"; import { ReduxActionTypes } from "constants/ReduxActionConstants"; import { InviteUsersToOrgFormValues, inviteUsersToOrg } from "./helpers"; import { INVITE_USERS_TO_ORG_FORM } from "constants/forms"; @@ -110,6 +111,12 @@ const StyledButton = styled(Button)` } `; +const Loading = styled(Spinner)` + padding-top: 10px; + margin: auto; + width: 100%; +`; + const validateFormValues = (values: { users: string; role: string }) => { if (values.users && values.users.length > 0) { const _users = values.users.split(",").filter(Boolean); @@ -158,6 +165,7 @@ const OrgInviteUsersForm = (props: any) => { fetchCurrentOrg, currentOrg, isApplicationInvite, + isLoading, } = props; const currentPath = useLocation().pathname; @@ -237,16 +245,20 @@ const OrgInviteUsersForm = (props: any) => { type="submit" /> - - {allUsers.map((user: { username: string; roleName: string }) => { - return ( -
-
{user.username}
-
{user.roleName}
-
- ); - })} -
+ {isLoading ? ( + + ) : ( + + {allUsers.map((user: { username: string; roleName: string }) => { + return ( +
+
{user.username}
+
{user.roleName}
+
+ ); + })} +
+ )} {!pathRegex.test(currentPath) && canManage && (