feat(client): show load state for members table

[AJMADHAB]

Description

show load state for members table

Changes Made

1.Modified MembersTable.tsx

How to Test

1. Steps to reproduce/test the behavior
   Go to App App Settings Page -> open any one app -> Refresh the page
2. Expected outcomes
   Loading skeleton while it gets Members table.

Notes

[github-actions]

@CodiumAI-Agent /describe

[QodoAI-Agent]

Title

(Describe updated until commit a737e10)

feat(client): show load state for members table

---

User description

Description

show load state for members table

Changes Made

1.Modified MembersTable.tsx

How to Test

1. Steps to reproduce/test the behavior
   Go to App App Settings Page -> open any one app -> Refresh the page
2. Expected outcomes
   Loading skeleton while it gets Members table.

Notes

---

PR Type

Enhancement

---

Description

• Replace LoadingScreen with MUI Skeleton placeholders

• Render skeleton rows equal to rowsPerPage

• Import and use Skeleton in table cells

• Remove fixed height in StyledMemberLoading

---

Changes walkthrough 📝

	Relevant files
Enhancement	MembersTable.tsx Use skeleton loaders for table rows                                            packages/client/src/components/settings/MembersTable.tsx Imported Skeleton and replaced LoadingScreen usage Render table rows with skeleton cell placeholders Removed height style from StyledMemberLoading Removed custom LoadingScreen component trigger +47/-4

---

Need help?

Type /help how to ... in the comments thread for any questions about PR-Agent usage.

Check out the documentation for more information.

[github-actions]

@CodiumAI-Agent /review

[QodoAI-Agent]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Layout Concern Removing the fixed height on StyledMemberLoading may affect vertical centering of the skeleton loader and lead to inconsistent spacing in different viewport sizes. const StyledMemberLoading = styled('div')(({ theme }) => ({ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', })); Accessibility The skeleton table lacks ARIA attributes (e.g., aria-busy, aria-live) to communicate loading state to assistive technologies. {isLoading ? ( <StyledMemberLoading> <StyledMemberTable> <Table.Body> {[...Array(rowsPerPage)].map((_, idx) => ( <Table.Row key={idx}> <Table.Cell size="medium" padding="checkbox" > <Skeleton variant="rectangular" width={20} height={20} /> </Table.Cell> <Table.Cell size="medium"> <Skeleton variant="text" width={160} height={35} /> </Table.Cell> <Table.Cell size="medium"> <Skeleton variant="text" width={240} height={35} /> </Table.Cell> <Table.Cell size="medium"> <Skeleton variant="text" width={160} height={35} /> </Table.Cell> <Table.Cell size="medium"> <Skeleton variant="text" width={80} height={35} /> </Table.Cell> </Table.Row> ))} </Table.Body> </StyledMemberTable> Performance Rendering rowsPerPage skeleton rows directly could degrade performance for large values; consider virtualization or capping the number of placeholder rows. {isLoading ? ( <StyledMemberLoading> <StyledMemberTable> <Table.Body> {[...Array(rowsPerPage)].map((_, idx) => ( <Table.Row key={idx}> <Table.Cell size="medium" padding="checkbox" > <Skeleton variant="rectangular" width={20} height={20} /> </Table.Cell> <Table.Cell size="medium"> <Skeleton variant="text" width={160} height={35} /> </Table.Cell> <Table.Cell size="medium"> <Skeleton variant="text" width={240} height={35} /> </Table.Cell> <Table.Cell size="medium"> <Skeleton variant="text" width={160} height={35} /> </Table.Cell> <Table.Cell size="medium"> <Skeleton variant="text" width={80} height={35} /> </Table.Cell> </Table.Row> ))} </Table.Body> </StyledMemberTable>

[github-actions]

@CodiumAI-Agent /improve

[QodoAI-Agent]

PR Code Suggestions ✨

Category	Suggestion	Impact
General	Make loading container full width Ensure the loading container spans the full width so the skeleton table aligns with the main table layout. Adding a width rule prevents unwanted horizontal shrinkage when loading. packages/client/src/components/settings/MembersTable.tsx [58-63] const StyledMemberLoading = styled('div')(({ theme }) => ({ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', + width: '100%', })); Suggestion importance[1-10]: 5 __ Why: Adding width: '100%' to the loading container ensures the skeleton table is aligned with the main table layout and prevents horizontal shrinkage.	Low
	Add aria-busy for accessibility Add an aria-busy="true" attribute on the skeleton table to improve accessibility by signaling assistive technologies that content is loading. packages/client/src/components/settings/MembersTable.tsx [745-749] -<StyledMemberTable> +<StyledMemberTable aria-busy="true"> <Table.Body> {[...Array(rowsPerPage)].map((_, idx) => ( /* row skeletons */ ))} </Table.Body> </StyledMemberTable> Suggestion importance[1-10]: 4 __ Why: Adding aria-busy="true" signals assistive technologies that the table content is loading, improving accessibility.	Low
	Memoize skeleton rows Memoize the skeleton rows using useMemo so they’re only recalculated when rowsPerPage changes, improving render performance during loading. packages/client/src/components/settings/MembersTable.tsx [747-788] -{[...Array(rowsPerPage)].map((_, idx) => ( +const skeletonRows = useMemo(() => Array.from({ length: rowsPerPage }), [rowsPerPage]); +… +{skeletonRows.map((_, idx) => ( <Table.Row key={idx}>…</Table.Row> ))} Suggestion importance[1-10]: 3 __ Why: Memoizing skeletonRows reduces redundant calculations when rowsPerPage is unchanged, but offers minimal performance impact for a simple array.	Low

[github-actions]

@CodiumAI-Agent /update_changelog

[QodoAI-Agent]

Changelog updates: 🔄

2025-07-17 *

Added

• Loading skeleton rows for members table while fetching data.

to commit the new content to the CHANGELOG.md file, please type:
'/update_changelog --pr_update_changelog.push_changelog_changes=true'