GSOC'26 Improve UX in Tools Table by Adding “Load More” for Large Tool Lists

Is your feature request related to a problem? Please describe

Yes

Problem 1:

In the Tools Section of the JSON Schema website , some tool categories contains large number of rows for this needs excessive scrolling which leads to degrade the UX and readability especially for the users who are on small sceen .

Problem 2:

The Filter Component at left side taking more space due to this the UI doesn't seems modern and making the website old fashioned

Describe the solution you'd like

Solution to Problem 1 :-
I proposed a Solution which mainly focuses on adding "Load more" button for the table having more than 4-5 rows, initially showing only 4 rows if user want to go in depth and see more then he/she can click the "Load more" button which then loads the other rows of that category.
This will very helpful, significant to reduce excessive scrolling and improving the readability and making the tooling section easier to navigate ,

Solution to Problem 2 :-
Replacing the always visible filter component with a clickable "Filter icon" . On Clicking the icon opens a pop-up modal containing same filter options.

Also I had attached the videos, images explaining the issue and its solution for your reference

Link to figma designs :

(https://www.figma.com/design/fDIwaQYNi61vMmmbDxTedQ/JSON-sCHEMA-Tooling-page?node-id=0-1&t=ebax8PTWsVRdQ8PR-1)

Image:

**[ Note :- The UI designs are for understanding, explaining purpose, I can design it better if you dont agree with it. ]n

Describe alternatives you've considered

The alternatives for this Issue can be :

1. Creating pagination for tool tables
2. LImiting the height of table by adding internal scrollbar to longer tables
   However the "Load more" and "Filter Icon" approach feels more efffective and it will maintain the layout of table without breaking the structure of table than this alternatives.

Additional context

Benefits of Resolving the issue :

1. This Enhancement can improve the UX also it aligns with modern Web UI.
2. It reduces the large browsing and scrolling to tooling page
3. It doesn't the filtering and current table logic just enhance the presentation.
4. The goal is to improve Usability , clarity and preserving the existing behaviour

Estimated Timeline:

Day 1 - Review Tool page - [✓]
Day 2-3 - Study code & Local setup - [✓]
Day 4 - Implement Solution to problem 1 - [pending...]
Day 5 - Implement Solution to problem 2 - [pending...]
Day 6 - Testing & PR - [pending...]

Timeline may adjust based on feedback and can be completed before estimated time

Also I had attached an video of expalaining the issue for your reference:
https://drive.google.com/file/d/1P823bj7DPHAB0jU9CV8r6qIaBuSqYRkU/view?usp=drive_link

If this proposal aligns with the project goals, I’d be happy to work on it. Kindly let me know if a maintainer or mentor can assign this issue to me.
@jdesrosiers
@Julian
@Honyii
@Utkarsh-123github
waiting for your replies.... 😅

Are you working on this?

Yes

Start with the Tools Section described in the issue and review the linked Figma design. Inspect how the existing tool tables and filter are presented before scoping both UI changes. Done means the agreed load-more behavior and filter interaction are implemented while preserving current filtering and table logic, followed by testing.