feat(rbac): fixed broken invite and role missing in dropdown

frontend/src/views/Org/MembersPage/MembersPage.tsx

@@ -23,7 +23,7 @@ export const MembersPage = withPermission(
 
     const orgId = currentOrg?._id || "";
 
-    const { data: roles } = useGetRoles({
+    const { data: roles, isLoading: isRolesLoading } = useGetRoles({
       orgId
     });
 
@@ -48,11 +48,17 @@ export const MembersPage = withPermission(
                 animate={{ opacity: 1, translateX: 0 }}
                 exit={{ opacity: 0, translateX: 30 }}
               >
-                <OrgMembersTable roles={roles as TRole<undefined>[]} />
+                <OrgMembersTable
+                  roles={roles as TRole<undefined>[]}
+                  isRolesLoading={isRolesLoading}
+                />
               </motion.div>
             </TabPanel>
             <TabPanel value={TabSections.Roles}>
-              <OrgRoleTabSection roles={roles as TRole<undefined>[]} />
+              <OrgRoleTabSection
+                roles={roles as TRole<undefined>[]}
+                isRolesLoading={isRolesLoading}
+              />
             </TabPanel>
           </Tabs>
         </div>

frontend/src/views/Org/MembersPage/components/OrgMembersTable/OrgMembersTable.tsx

@@ -66,6 +66,7 @@ import { useFetchServerStatus } from "@app/hooks/api/serverDetails";
 
 type Props = {
   roles?: TRole<undefined>[];
+  isRolesLoading?: boolean;
 };
 
 const addMemberFormSchema = yup.object({
@@ -74,7 +75,7 @@ const addMemberFormSchema = yup.object({
 
 type TAddMemberForm = yup.InferType<typeof addMemberFormSchema>;
 
-export const OrgMembersTable = ({ roles = [] }: Props) => {
+export const OrgMembersTable = ({ roles = [], isRolesLoading }: Props) => {
   const router = useRouter();
   const { createNotification } = useNotificationContext();
 
@@ -292,7 +293,7 @@ export const OrgMembersTable = ({ roles = [] }: Props) => {
     setInviteLinkCopied.on();
   };
 
-  const isLoading = isMembersLoading || IsWsMembershipLoading;
+  const isLoading = isMembersLoading || IsWsMembershipLoading || isRolesLoading;
 
   return (
     <div className="w-full">

frontend/src/views/Project/MembersPage/MembersPage.tsx

@@ -47,7 +47,7 @@ export const MembersPage = withProjectPermission(
                 animate={{ opacity: 1, translateX: 0 }}
                 exit={{ opacity: 0, translateX: 30 }}
               >
-                <MemberListTab roles={roles as TRole<string>[]} />
+                <MemberListTab roles={roles as TRole<string>[]} isRolesLoading={isRolesLoading} />
               </motion.div>
             </TabPanel>
             <TabPanel value={TabSections.Roles}>

frontend/src/views/Project/MembersPage/components/MemberListTab/MemberListTab.tsx

@@ -54,6 +54,7 @@ import { TRole } from "@app/hooks/api/roles/types";
 
 type Props = {
   roles?: TRole<string>[];
+  isRolesLoading?: boolean;
 };
 
 const addMemberFormSchema = z.object({
@@ -62,7 +63,7 @@ const addMemberFormSchema = z.object({
 
 type TAddMemberForm = z.infer<typeof addMemberFormSchema>;
 
-export const MemberListTab = ({ roles = [] }: Props) => {
+export const MemberListTab = ({ roles = [], isRolesLoading }: Props) => {
   const { createNotification } = useNotificationContext();
   const { t } = useTranslation();
 
@@ -227,7 +228,7 @@ export const MemberListTab = ({ roles = [] }: Props) => {
     }
   };
 
-  const isLoading = isMembersLoading;
+  const isLoading = isMembersLoading || isRolesLoading;
 
   return (
     <div className="w-full">