feat(ui): added table skeleton and loading for settings page,

fix(ui): resolved missing loading state in add new member and whitespace in project settings page

frontend/src/views/Settings/OrgSettingsPage/components/OrgMembersTable/OrgMembersTable.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { faMagnifyingGlass, faPlus, faTrash } from '@fortawesome/free-solid-svg-icons';
+import { faMagnifyingGlass, faPlus, faTrash, faUsers } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { yupResolver } from '@hookform/resolvers/yup';
 import * as yup from 'yup';
@@ -8,6 +8,7 @@ import * as yup from 'yup';
 import {
   Button,
   DeleteActionModal,
+  EmptyState,
   FormControl,
   IconButton,
   Input,
@@ -17,14 +18,14 @@ import {
   SelectItem,
   Table,
   TableContainer,
+  TableSkeleton,
   Tag,
   TBody,
   Td,
   Th,
   THead,
   Tr,
-  UpgradePlanModal
-} from '@app/components/v2';
+  UpgradePlanModal} from '@app/components/v2';
 import { usePopUp } from '@app/hooks';
 import { OrgUser, Workspace } from '@app/hooks/api/types';
 
@@ -32,6 +33,7 @@ type Props = {
   members?: OrgUser[];
   workspaceMemberships?: Record<string, Workspace[]>;
   orgName: string;
+  isLoading?: boolean;
   isMoreUserNotAllowed: boolean;
   onRemoveMember: (userId: string) => Promise<void>;
   onInviteMember: (email: string) => Promise<void>;
@@ -56,7 +58,8 @@ export const OrgMembersTable = ({
   onInviteMember,
   onGrantAccess,
   onRoleChange,
-  userId
+  userId,
+  isLoading
 }: Props) => {
   const [searchMemberFilter, setSearchMemberFilter] = useState('');
   const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
@@ -72,8 +75,8 @@ export const OrgMembersTable = ({
     formState: { isSubmitting }
   } = useForm<TAddMemberForm>({ resolver: yupResolver(addMemberFormSchema) });
 
-  const onAddMember = ({ email }: TAddMemberForm) => {
-    onInviteMember(email);
+  const onAddMember = async ({ email }: TAddMemberForm) => {
+    await onInviteMember(email);
     handlePopUpClose('addMember');
     reset();
   };
@@ -140,73 +143,79 @@ export const OrgMembersTable = ({
               </Tr>
             </THead>
             <TBody>
-              {filterdUser.map(({ user, inviteEmail, role, _id: orgMembershipId, status }) => {
-                const name = user ? `${user.firstName} ${user.lastName}` : '-';
-                const email = user?.email || inviteEmail;
-                const userWs = workspaceMemberships?.[user?._id];
+              {isLoading && <TableSkeleton columns={5} key="org-members" />}
+              {!isLoading &&
+                filterdUser.map(({ user, inviteEmail, role, _id: orgMembershipId, status }) => {
+                  const name = user ? `${user.firstName} ${user.lastName}` : '-';
+                  const email = user?.email || inviteEmail;
+                  const userWs = workspaceMemberships?.[user?._id];
 
-                return (
-                  <Tr key={`org-membership-${orgMembershipId}`} className="w-full">
-                    <Td>{name}</Td>
-                    <Td>{email}</Td>
-                    <Td>
-                      {status === 'accepted' && (
-                        <Select
-                          defaultValue={role}
-                          isDisabled={userId === user?._id}
-                          className="w-full bg-mineshaft-600"
-                          onValueChange={(selectedRole) =>
-                            onRoleChange(orgMembershipId, selectedRole)
-                          }
-                        >
-                          {(isIamOwner || role === 'owner') && (
-                            <SelectItem value="owner">owner</SelectItem>
-                          )}
-                          <SelectItem value="admin">admin</SelectItem>
-                          <SelectItem value="member">member</SelectItem>
-                        </Select>
-                      )}
-                      {(status === 'invited' || status === 'verified') && (
-                        <Button colorSchema="secondary" onClick={() => onInviteMember(email)}>
-                          Resent Invite
-                        </Button>
-                      )}
-                      {status === 'completed' && (
-                        <Button
-                          colorSchema="secondary"
-                          onClick={() => onGrantAccess(user?._id, user?.publicKey)}
-                        >
-                          Grant Access
-                        </Button>
-                      )}
-                    </Td>
-                    <Td>
-                      {userWs ? (
-                        userWs?.map(({ name: wsName, _id }) => (
-                          <Tag key={`user-${user._id}-workspace-${_id}`} className="my-1">
-                            {wsName}
-                          </Tag>
-                        ))
-                      ) : (
-                        <Tag colorSchema="red">This user isn&apos;t part of any projects yet</Tag>
-                      )}
-                    </Td>
-                    <Td>
-                      {userId !== user?._id && <IconButton
-                        ariaLabel="delete"
-                        colorSchema="danger"
-                        isDisabled={userId === user?._id}
-                        onClick={() => handlePopUpOpen('removeMember', { id: orgMembershipId })}
-                      >
-                        <FontAwesomeIcon icon={faTrash} />
-                      </IconButton>}
-                    </Td>
-                  </Tr>
-                );
-              })}
+                  return (
+                    <Tr key={`org-membership-${orgMembershipId}`} className="w-full">
+                      <Td>{name}</Td>
+                      <Td>{email}</Td>
+                      <Td>
+                        {status === 'accepted' && (
+                          <Select
+                            defaultValue={role}
+                            isDisabled={userId === user?._id}
+                            className="w-full bg-mineshaft-600"
+                            onValueChange={(selectedRole) =>
+                              onRoleChange(orgMembershipId, selectedRole)
+                            }
+                          >
+                            {(isIamOwner || role === 'owner') && (
+                              <SelectItem value="owner">owner</SelectItem>
+                            )}
+                            <SelectItem value="admin">admin</SelectItem>
+                            <SelectItem value="member">member</SelectItem>
+                          </Select>
+                        )}
+                        {(status === 'invited' || status === 'verified') && (
+                          <Button colorSchema="secondary" onClick={() => onInviteMember(email)}>
+                            Resent Invite
+                          </Button>
+                        )}
+                        {status === 'completed' && (
+                          <Button
+                            colorSchema="secondary"
+                            onClick={() => onGrantAccess(user?._id, user?.publicKey)}
+                          >
+                            Grant Access
+                          </Button>
+                        )}
+                      </Td>
+                      <Td>
+                        {userWs ? (
+                          userWs?.map(({ name: wsName, _id }) => (
+                            <Tag key={`user-${user._id}-workspace-${_id}`} className="my-1">
+                              {wsName}
+                            </Tag>
+                          ))
+                        ) : (
+                          <Tag colorSchema="red">This user isn&apos;t part of any projects yet</Tag>
+                        )}
+                      </Td>
+                      <Td>
+                        {userId !== user?._id && (
+                          <IconButton
+                            ariaLabel="delete"
+                            colorSchema="danger"
+                            isDisabled={userId === user?._id}
+                            onClick={() => handlePopUpOpen('removeMember', { id: orgMembershipId })}
+                          >
+                            <FontAwesomeIcon icon={faTrash} />
+                          </IconButton>
+                        )}
+                      </Td>
+                    </Tr>
+                  );
+                })}
             </TBody>
           </Table>
-          {filterdUser.length === 0 && <tr className='bg-bunker-800 text-sm py-4 text-center text-bunker-400 w-full mx-auto flex justify-center'><td className='col-span-5'>No project members found</td></tr>}
+          {!isLoading && filterdUser?.length === 0 && (
+            <EmptyState title="No project members found" icon={faUsers} />
+          )}
         </TableContainer>
       </div>
       <Modal