[Website] Improve the CLS score of meshery.io/catalog page

[sudhanshutech]

Current State of the Meshery.io site

Currently the cls score of meshery.io/catalog is poor. It need to be improved because its affecting the page performance and will give users a bad experience. The current performance of cls is 22% poor. To understand cls: https://web.dev/articles/cls

Desired State of the Meshery.io site

Improve the cls

---

Contributor Guides and Handbook

The meshery.io website uses Jekyll and GitHub Pages. Site content is found under the master branch.

• 📚 See the Contributing to Meshery.io Website section of the readme.md and other contributing instructions, too.
• 🎨 Wireframes and designs for Meshery UI in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack

[THEBOSS0369]

Hey @sudhanshutech ! Can i work on this issue, Right now i don't know anything about improving cls score but i will try my best to imporve it.

[rahulrana701]

I think developing a page structure to display these catalog items might be helpful. We could display 9 items on the first page and the rest on subsequent pages. Additionally, a few other adjustments could be made to improve the layout. What are your thoughts on this, @sudhanshutech?

[sudhanshutech]

@THEBOSS0369 its good you want to try so if you would get some details and learn its details and come back with approach then we can get you this assigned.

[sudhanshutech]

@rahulrana701 seems a good plan , but we do show 9 results only per page.

[rahulrana701]

We will fix the size of the layout displaying the catalog items to show only 9 items at a time. If the user wants to see more items, we will provide a button to view additional catalog items or display the number of pages below, allowing users to navigate through the pages to see the items @sudhanshutech

[rahulrana701]

If you find this approach relevant , I would like to give it a shot. @leecalcote @sudhanshutech

[sudhanshutech]

@rahulrana701 i already said we already show 9 items per page and to see other catalog we can click the next button. However there is slight bug when first loads it show all items and when go to next page and come back it display as expected 9 cards. I guess @Muhammed-Moinuddin is fixing it.

[sudhanshutech]

@rahulrana701 cls is not dependent on the number of card displayed. Its a issue that if any component has issue with shift while interacted. Have you read the doc i mentioned in the issue. Please come back with solutions based on that and yes that would be great you can give a shot

[Muhammed-Moinuddin]

@rahulrana701 i already said we already show 9 items per page and to see other catalog we can click the next button. However there is slight bug when first loads it show all items and when go to next page and come back it display as expected 9 cards. I guess @Muhammed-Moinuddin is fixing it.

Yup. Will share updates soon.

[Raghav1783]

@sudhanshutech the component i have highlighted in the picture below loads after the page gets loaded, which is one of the reason of the cls, another reason for the cls is the time taken by the items to load. I would like to work on this issue.