feat(client): show loading skeleton

[AJMADHAB]

Description

show loading skeleton.

Changes Made

1.Modified HomePage.tsx

How to Test

1. Steps to reproduce/test the behavior:
   Go to App Landing Page -> Refresh the page
2. Expected outcomes:
   Loading skeleton while it gets app images

Notes

[github-actions]

@CodiumAI-Agent /describe

[CodiumAI-Agent]

Title

feat(client): show loading skeleton

---

User description

Description

show loading skeleton.

Changes Made

1.Modified HomePage.tsx

How to Test

1. Steps to reproduce/test the behavior:
   Go to App Landing Page -> Refresh the page
2. Expected outcomes:
   Loading skeleton while it gets app images

Notes

---

PR Type

Enhancement

---

Description

• Add loading skeleton for bookmarked apps

• Render placeholders during data fetch

• Always show bookmarked section when not system

• Refactor favoritedApps rendering logic

---

Changes walkthrough 📝

	Relevant files
Enhancement	HomePage.tsx Add AppTile loading skeleton                                                          packages/client/src/pages/HomePage.tsx Imported MUI Skeleton component Added AppTileSkeleton styled wrapper Display Skeleton placeholders on loading Updated favoritedApps rendering logic +45/-32

---

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

[github-actions]

@CodiumAI-Agent /improve

[CodiumAI-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 Invalid Styles The AppTileSkeleton styled component uses non-standard CSS properties (my, flexDirection, numeric marginRight without units) and lacks display settings. This may prevent the skeletons from rendering with the intended layout. const AppTileSkeleton = styled('div')(({ theme }) => ({ marginRight: 0.5, my: 5, flexDirection: 'column', margin: theme.spacing(1), })); Header Consistency When getFavoritedApps.status is LOADING but favoritedApps is empty, the skeletons appear without the "Bookmarked" header since its condition checks only favoritedApps.length. Consider showing the header during loading. {mode != 'System' && ( <StyledSection> {getFavoritedApps.status === 'LOADING' ? Array.from({ length: 3 }).map((_, i) => ( <AppTileSkeleton key={i}> <Skeleton variant="rectangular" width={250} height={118} /> <Skeleton width="80%" /> <Skeleton width="60%" /> </AppTileSkeleton> )) Duplicate Logic The navigation logic inside onAction is duplicated for both skeleton and real app tiles. Consider extracting it into a helper to reduce redundancy and improve maintainability. onAction={() => { if (mode === 'Discoverable') { navigate( `/app/${app.project_id}/detail`, ); } else { navigate( `/app/${app.project_id}`, ); }

[CodiumAI-Agent]

PR Code Suggestions ✨

Category	Suggestion	Impact
General	Fix CSS in skeleton wrapper The styled component uses shorthand props (my) and numeric values that aren’t valid CSS, and flexDirection won’t apply without display:flex. Switch to proper CSS properties and theme.spacing units, and add display:"flex". packages/client/src/pages/HomePage.tsx [70-75] const AppTileSkeleton = styled('div')(({ theme }) => ({ - marginRight: 0.5, - my: 5, + display: 'flex', flexDirection: 'column', margin: theme.spacing(1), + marginRight: theme.spacing(0.5), + marginTop: theme.spacing(5), + marginBottom: theme.spacing(5), })); Suggestion importance[1-10]: 6 __ Why: The AppTileSkeleton styled component uses invalid CSS shorthand (my, numeric values) and lacks display: flex, so updating it ensures correct styling and layout.	Low
	Hide empty favorites section The section renders even when there are no favorites and not loading. Constrain it to show only during loading or when apps exist by adding a condition checking favoritedApps.length. packages/client/src/pages/HomePage.tsx [404-443] -{mode != 'System' && ( +{mode !== 'System' && (getFavoritedApps.status === 'LOADING' || favoritedApps.length > 0) && ( <StyledSection> {getFavoritedApps.status === 'LOADING' ? Array.from({ length: 3 }).map((_, i) => ( <AppTileSkeleton key={i}> … </AppTileSkeleton> )) : favoritedApps.map((app, i) => ( <AppTileCard key={i} … /> ))} </StyledSection> )} Suggestion importance[1-10]: 5 __ Why: Constraining the <StyledSection> to render only when loading or when favoritedApps exist prevents displaying an empty container, improving the UI.	Low
Possible issue	Use stable key for list Using array index as key can lead to rendering issues when the list changes. Switch to a stable unique identifier such as app.project_id. packages/client/src/pages/HomePage.tsx [414-417] -favoritedApps.map((app, i) => ( +favoritedApps.map(app => ( <AppTileCard - key={i} + key={app.project_id} app={app} … /> )) Suggestion importance[1-10]: 6 __ Why: Replacing the array index key with app.project_id provides a stable and unique key for each <AppTileCard>, avoiding potential rendering issues.	Low

[AAfghahi]

I would use the semoss-ui components before importing from mui

[AAfghahi]

semoss ui has a skeleton that I think it would be better if you used.

[github-actions]

@CodiumAI-Agent /update_changelog

[CodiumAI-Agent]

Changelog updates: 🔄

2025-06-05 *

Added

• Loading skeleton for app tiles on the landing page while fetching images.

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