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 && (