[Feature]: Implement Cursor-Based Infinite Scrolling for Model Directory

[nitishchaubeyy]

Description

As the community adds more items to AIAtlas, fetching all models at once via GET /api/models will lead to heavy database loads and sluggish client performance. We need to upgrade the model table and card views to use infinite scrolling powered by cursor-based pagination.

Expected Behavior

1. Backend Upgrade: Modify the GET /api/models endpoint to accept cursor and limit query parameters. Implement Prisma's cursor-based pagination (using take and skip: 1).
2. Frontend Intersection Observer: Integrate the Intersection Observer API (or a library like react-intersection-observer) at the bottom of the ModelTable and ModelCard grids.
3. State Management: When the user scrolls to the bottom, automatically fetch the next batch of models and append them to the existing React state seamlessly.
4. Loading States: Display the existing Skeletons.tsx component while the next batch is being fetched over the network.

Constraints

• URL state (like ?provider=OpenAI) must remain functional and work in tandem with the infinite scroll pagination.
• Avoid offset-based pagination as it causes layout shifts and performance degradation on large datasets; stick to cursor-based.

Labels

enhancement, level3, performance, database

[nitishchaubeyy]

I would like to work on this under Nsoc 26 Kindly assign this to me!
@AditthyaSS

[anshul23102]

Interested in contributing under NSoC'26. This is a valuable issue. Happy to work on it.

/assign