feat(client): lazyloading for modelsettings

[SuryaNarayanan-Kgs]

Description

Changes Made

How to Test

1. Steps to reproduce/test the behavior
2. Expected outcomes

Notes

[github-actions]

@CodiumAI-Agent /describe

[CodiumAI-Agent]

Title

feat(client): lazyloading for modelsettings

---

User description

Description

Changes Made

How to Test

1. Steps to reproduce/test the behavior
2. Expected outcomes

Notes

---

PR Type

Enhancement

---

Description

• Introduce SkeletonCard for loading placeholders

• Add loadingMore state for infinite scrolling

• Display skeleton loaders during data fetch

• Adjust scroll handler timing and flags

---

Changes walkthrough 📝

Relevant files

Enhancement

EngineSettingsIndexPage.tsx Add loading skeletons for engine list                                        packages/client/src/pages/settings/EngineSettingsIndexPage.tsx Import and style SkeletonCard placeholder Introduce loadingMore state flag Update scroll handler for lazy loading Render skeleton cards during loading +24/-10  SkeletonCard.tsx Implement SkeletonCard placeholder component                          packages/client/src/pages/settings/SkeletonCard.tsx Create new SkeletonCard component file Define skeleton layouts for cards Use Box and Skeleton for placeholders Export default SkeletonCard component +84/-0

---

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: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Scroll logic The infinite scroll handler sets loadingMore to false immediately and delays the offset update by 3 seconds, which may invert loading states and allow multiple triggers before data loads. Confirm that loading states and debounce logic behave as expected. scrollTimeout = setTimeout(() => { if (!canCollectRef.current) return; setLoadingMore(false); setTimeout(() => { setOffset(offsetRef.current + limit); }, 3000); }, 200); Commented-out code There is a commented-out <Stack> block inside the Backdrop. Remove or restore this code to keep the codebase clean and ensure the loading UI is consistent. {/* <Stack direction={'column'} alignItems={'center'} justifyContent={'center'} spacing={1} > <CircularProgress /> <Typography variant="body2">Loading</Typography> <Typography variant="caption">Databases</Typography> </Stack> */} Unused overlay container The empty <Box> overlay inside SkeletonCard appears unused. Either implement its intended purpose or remove it to simplify the layout. <Box sx={{ position: 'absolute', top: 16, width: 100, height: 140, overflow: 'hidden', }} ></Box>

[CodiumAI-Agent]

PR Code Suggestions ✨

Latest suggestions up to 93156c9

Category	Suggestion	Impact
Possible issue	Fix inverted loading state The loadingMore flag is inverted: you want to show skeletons when loading starts, not hide them. Also, avoid delaying the actual fetch by 3 seconds unless intentional. Set loadingMore to true before fetching and call setOffset immediately (or after your debounce) so loading begins promptly. packages/client/src/pages/settings/EngineSettingsIndexPage.tsx [375-379] if (!canCollectRef.current) return; -setLoadingMore(false); -setTimeout(() => { - setOffset(offsetRef.current + limit); -}, 3000); +setLoadingMore(true); +setOffset(offsetRef.current + limit); Suggestion importance[1-10]: 8 __ Why: The scroll handler mistakenly hides skeletons (setLoadingMore(false)) and delays the offset update by 3s, breaking the loading indicator; inverting to true and updating immediately restores expected UX and responsiveness.	Medium
	Hide skeleton after load This effect runs when data arrives, so setting loadingMore to true here re-opens the skeleton after data is loaded. You should set it to false once new items are rendered to hide the loader. packages/client/src/pages/settings/EngineSettingsIndexPage.tsx [223-229] dispatch({ type: 'field', field: 'databases', value: mutateListWithVotes, }); -setLoadingMore(true); +setLoadingMore(false); searchbarRef.current?.focus(); Suggestion importance[1-10]: 7 __ Why: Setting loadingMore to true when data arrives re‐opens the skeleton erroneously; flipping to false here correctly hides the loader once new items are rendered.	Medium
General	Make skeleton responsive Fixed pixel dimensions may overflow the grid. Use responsive or percentage-based sizing (e.g. width: '100%' and aspectRatio) so the skeleton cards adapt to container breaks. packages/client/src/pages/settings/SkeletonCard.tsx [5-12] <Card sx={{ - width: 290, - height: 387, + width: '100%', + aspectRatio: '290 / 387', borderRadius: 3, boxShadow: 3, overflow: 'hidden', }} > Suggestion importance[1-10]: 4 __ Why: Using percentage or aspect ratio improves adaptability, but the fixed dimensions aren’t inherently broken; this is a nice-to-have styling enhancement rather than a critical fix.	Low

---

Previous suggestions

Suggestions up to commit 8096899

Category	Suggestion	Impact
Possible issue	Disable loading indicator After fetching engine data, the loading state should be disabled to hide the skeletons. Change setLoadingMore(true) to false so the UI stops showing placeholders once data arrives. packages/client/src/pages/settings/EngineSettingsIndexPage.tsx [228] -setLoadingMore(true); +setLoadingMore(false); Suggestion importance[1-10]: 8 __ Why: Changing setLoadingMore(true) to false stops unrelated skeleton placeholders from appearing after data loads, fixing the loading indicator logic.	Medium
General	Show skeletons on scroll When triggering additional loads on scroll, you want to show loading skeletons rather than hide them immediately. Flip this to setLoadingMore(true) to indicate loading. packages/client/src/pages/settings/EngineSettingsIndexPage.tsx [376] -setLoadingMore(false); +setLoadingMore(true); Suggestion importance[1-10]: 7 __ Why: Flipping to setLoadingMore(true) correctly displays loading placeholders on infinite scroll, improving UX consistency.	Medium
	Remove long loading delay The 3-second artificial delay can degrade UX; remove or shorten it. Consider invoking setOffset immediately or after a short debounce (e.g., 200ms) instead of 3000ms. packages/client/src/pages/settings/EngineSettingsIndexPage.tsx [377-379] -setTimeout(() => { - setOffset(offsetRef.current + limit); -}, 3000); +setOffset(offsetRef.current + limit); Suggestion importance[1-10]: 6 __ Why: Shortening or removing the 3000ms delay for setOffset will yield a snappier data load, enhancing perceived performance.	Low
	Restore loading spinner The commented-out spinner in Backdrop prevents users from seeing a loading indicator. Uncomment and restore this block or remove the wrapping comments so the loader is visible. packages/client/src/pages/settings/EngineSettingsIndexPage.tsx [405-414] -{/* <Stack +<Stack direction={'column'} alignItems={'center'} justifyContent={'center'} spacing={1} > <CircularProgress /> <Typography variant="body2">Loading</Typography> <Typography variant="caption">Databases</Typography> -</Stack> */} +</Stack> Suggestion importance[1-10]: 6 __ Why: Uncommenting the <Stack> spinner block ensures users see a loading indicator in the backdrop, improving feedback on initial data fetch.	Low

[AAfghahi]

Could you show me some steps to reproduce this, and also include some screenshots of what it looks like.

Thank you!

[AAfghahi]

Is this a reusable component? Are other features going to reasonably want this? If so, I think that we should put it in semoss/ui as opposed to making it a page in settings.

[johbaxter]

@SuryaNarayanan-Kgs

Hey Surya i refactored the code that you had done. Please pay attention to how i cleaned the code up.

Please no inline styles.

And when we should be making a reusable component, please place it in libs/ui as Arash stated.

I am also noticing another thing:

The load state doesn't seem to stop if you have gotten all your results

@AAfghahi We likely need to standardize to this component on the AppCatalog Page as well, youll see this code pushed up soon with new landing page.

[johbaxter]

Please delete this file and look at the additions that i made to component library.

Also address the bug that is with always showing load Skeleton Cards. Play with the limit in EngineSettingsIndexPage