[FEATURE] Introduce Pagination on Blog Page

[Adi-204]

Why do we need this improvement?

Currently, the Blog page displays all blog posts in an infinite scroll manner, which can feel overwhelming to users. To improve user experience and performance, I propose implementing pagination to limit the number of blogs displayed per page.

How will this change help?

1. Improves performance by reducing the initial page load time.
2. Enhances user experience by providing structured navigation.
3. Prevents users from feeling overwhelmed by an infinite feed.

Screenshots

Proposed Solution:

How could it be implemented/designed?

Proposed Solution:

1. Implement pagination with a configurable number of blogs per page (e.g., 10 blogs per page).
2. Provide "Next" and "Previous" buttons for navigation.
3. Allow users to jump to a specific page number.
4. Ensure smooth UX and proper state management to retain pagination when navigating back.

🚧 Breaking changes

No

👀 Have you checked for similar open issues?

• I checked and didn't find a similar issue

🏢 Have you read the Contributing Guidelines?

• I have read the Contributing Guidelines

Are you willing to work on this issue?

Yes I am willing to submit a PR!

[Adi-204]

Please assign me the issue I would like to contribute. Waiting for triage. I'm willing to work on it once it passes triage.

[Aditya-Prakash14]

/assign

[rajaNayak123]

I came across issue #3570 (Introduce Pagination on Blog Page) in the repository and found it interesting. I believe I can contribute by working on this issue. Could you please assign the issue to me?

[akshatnema]

@Adi-204 I think there is an existing for the pagination inside blog page. We have created a design for pagination in Figma. @devilkiller-ag @Mayaleeeee can you please share the mock of Pagination that you built during storybook integration?

[akshatnema]

Figma design for Pagination is - https://www.figma.com/design/hJgfKiPHHu2wG37L9DEUj0/AsyncAPI_Website-Redesign-%2B-DS?node-id=361-134&p=f&t=yv24qehfwaHPtEk9-0.

@Mayaleeeee Can you please suggestion one particular that you think suits good with blogs page?

[Mayaleeeee]

Figma design for Pagination is - https://www.figma.com/design/hJgfKiPHHu2wG37L9DEUj0/AsyncAPI_Website-Redesign-%2B-DS?node-id=361-134&p=f&t=yv24qehfwaHPtEk9-0.

@Mayaleeeee Can you please suggestion one particular that you think suits good with blogs page?

Sure!

@Adi-204, please use the first component on the Design System file here - https://www.figma.com/design/cFsY4LCfKmDqdlaTIJPpA1/Design-System?node-id=413-145&t=6UQJ4risiwrJqFfT-1

@akshatnema, the link you shared is a copy of the design system I created to work on the web redesign.

[Adi-204]

Working on the issue.

[userAdityaa]

@Adi-204 if you face any difficulty tell me. I would appreciate to work with you.

[Adi-204]

@akshatnema @Mayaleeeee
I’ve implemented functional blog pagination, but I’m facing an issue with URL parameter handling. Currently, all applied filters directly update the URL parameters. If I add the page number to the URL, it’s being treated as a filter, which it is not. This behavior leads to incorrect filtering. Any suggestions on how to address this issue?

AsyncApi.Blog.-.Made.with.Clipchamp.mp4

[priyanshuxkumar]

@akshatnema @Mayaleeeee I’ve implemented functional blog pagination, but I’m facing an issue with URL parameter handling. Currently, all applied filters directly update the URL parameters. If I add the page number to the URL, it’s being treated as a filter, which it is not. This behavior leads to incorrect filtering. Any suggestions on how to address this issue?

AsyncApi.Blog.-.Made.with.Clipchamp.mp4

have you fixed it ?

[priyanshuxkumar]

@akshatnema @Mayaleeeee
I have implemented a pagination feature. Please let me know if everything is okay or if further adjustments are needed.

video.mp4