[WEB-2022] fix: handled null state on members page (#5226)

* fix: handled null state on members page

* fix: skeleton loader added

web/app/[workspaceSlug]/(projects)/settings/members/page.tsx

@@ -91,7 +91,7 @@ const WorkspaceMembersSettingsPage = observer(() => {
         onSubmit={handleWorkspaceInvite}
       />
       <section className="w-full overflow-y-auto md:pr-9 pr-4">
-        <div className="flex items-center justify-between gap-4 border-b border-custom-border-100 py-3.5">
+        <div className="flex items-center justify-between gap-4 py-3.5">
           <h4 className="text-xl font-medium">Members</h4>
           <div className="ml-auto flex items-center gap-1.5 rounded-md border border-custom-border-200 bg-custom-background-100 px-2.5 py-1.5">
             <Search className="h-3.5 w-3.5 text-custom-text-400" />

web/core/components/ui/loader/layouts/members-layout-loader.tsx

@@ -0,0 +1,14 @@
+export const MembersLayoutLoader = () => (
+  <div className="flex gap-5 py-1.5 overflow-x-auto">
+    {Array.from({ length: 5 }, (_, columnIndex) => (
+      <div key={columnIndex} className="flex flex-col gap-3">
+        <div className={`flex items-center justify-between h-9 ${columnIndex === 0 ? "w-80" : "w-36"}`}>
+          <span className="h-6 w-24 bg-custom-background-80 rounded animate-pulse" />
+        </div>
+        {Array.from({ length: 2 }, (_, cardIndex) => (
+          <span className="h-8 w-full bg-custom-background-80 rounded animate-pulse" key={cardIndex} />
+        ))}
+      </div>
+    ))}
+  </div>
+);

web/core/components/workspace/settings/members-list-item.tsx

@@ -1,11 +1,13 @@
 "use client";
 
 import { FC } from "react";
+import { isEmpty } from "lodash";
 import { observer } from "mobx-react";
 // ui
 import { IWorkspaceMember } from "@plane/types";
 import { TOAST_TYPE, Table, setToast } from "@plane/ui";
 // components
+import { MembersLayoutLoader } from "@/components/ui/loader/layouts/members-layout-loader";
 import { ConfirmWorkspaceMemberRemove } from "@/components/workspace";
 // constants
 import { WORKSPACE_MEMBER_LEAVE } from "@/constants/event-tracker";
@@ -79,8 +81,10 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
   // 2. only admin or member can change role
   // 3. user cannot change role of higher role
 
+  if (isEmpty(columns)) return <MembersLayoutLoader />;
+
   return (
-    <>
+    <div className="border-t border-custom-border-100">
       {removeMemberModal && (
         <ConfirmWorkspaceMemberRemove
           isOpen={removeMemberModal.member.id.length > 0}
@@ -93,7 +97,7 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
         />
       )}
       <Table
-        columns={columns}
+        columns={columns ?? []}
         data={(memberDetails?.filter((member): member is IWorkspaceMember => member !== null) ?? []) as any}
         keyExtractor={(rowData) => rowData?.member.id ?? ""}
         tHeadClassName="border-b border-custom-border-100"
@@ -102,6 +106,6 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
         tBodyTrClassName="divide-x-0"
         tHeadTrClassName="divide-x-0"
       />
-    </>
+    </div>
   );
 });

web/core/components/workspace/settings/members-list.tsx

@@ -13,7 +13,7 @@ import { useMember } from "@/hooks/store";
 
 export const WorkspaceMembersList: FC<{ searchQuery: string; isAdmin: boolean }> = observer((props) => {
   const { searchQuery, isAdmin } = props;
-  const [showPendingInvites, setShowPendingInvites] = useState<boolean>(false);
+  const [showPendingInvites, setShowPendingInvites] = useState<boolean>(true);
 
   // router
   const { workspaceSlug } = useParams();