[Feature]: "Load More Articles” with Pagination in News Section

[Rahul-R79]

Feature Type

UI/UX Enhancement

Problem Description

Hey SugarLabs Team,

Currently, the News section on the Sugar Labs website uses a “Load More Articles” button for pagination. Each click loads 6 additional cards, appending them to the existing list.

This approach creates several usability issues:

1. To reach older or last articles, users must repeatedly click Load More, which is time-consuming.
2. As more articles load, the page becomes very long.
3. If a user scrolls down and then wants to return to the top or revisit a previously loaded section, they must manually scroll back through all loaded content.
4. There is no clear indication of the total number of pages or the user’s current position in the content.

Impact on User Experience

1. Poor navigation for users who want to browse older news.
2. Increased scrolling effort, especially on mobile devices.
3. Reduced accessibility and discoverability of content.
4. Not ideal for users who want to jump directly to a specific section or page.

Proposed Solution

Replace the “Load More Articles” button with a standard pagination system

Key Benefits of Pagination

• Users can directly navigate to any page without loading all articles.
• Clear visibility of total pages and current page.
• Faster access to older content.
• Reduced scrolling and better performance.
• Improved accessibility and overall user experience.
• More familiar and intuitive interaction pattern for users.

Alternative Solutions

No response

Mockups or Examples

BEFORE

AFTER

Implementation Details

Pagination Logic

• Replace the existing “Load More Articles” button with a page-based pagination system.
• Display a fixed number of articles per page (e.g., 6 articles per page, matching the current behavior).
• Fetch and render articles based on the selected page number instead of appending all previous results.

Frontend Changes

• Introduce a reusable Pagination component below the news cards.
• Include: Page numbers (e.g., 1, 2, 3…), Previous and Next navigation buttons, Highlight the active page clearly, Smoothly scroll the page to the top when a new page is selected.

Styling & Theme Consistency

• Style the pagination buttons using the existing website color theme to maintain visual consistency.
• Use the same typography, border radius, hover states, and spacing already defined in the design system.
• Ensure clear visual feedback for: Active page, Hover state etc..

Responsiveness & Accessibility

• Ensure pagination works seamlessly across desktop, tablet, and mobile devices.
• On smaller screens: Reduce visible page numbers or use a compact layout, Add accessibility support, Proper ARIA labels, Keyboard navigation support, Screen-reader friendly buttons

Performance Considerations

• Load only the required articles for the selected page to avoid unnecessary data rendering.
• Prevent loading all articles at once, improving page performance and memory usage.
• Cache previously visited pages where applicable to reduce repeated requests.

Additional Context

No response

Code of Conduct

• I have searched for similar feature requests before creating this one
• I understand this is a feature request for the website only, not Sugar Labs software
• I agree to follow the project's Code of Conduct

[Aishwarya-kamkar09]

Hello @Rahul-R79👋
Thank you for taking a look at this issue.

I’d like to work on this and request assignment. I’ve reviewed the current “Load More Articles” implementation and understand how it can be replaced with a page-based pagination approach while keeping the UI consistent.

I’ve implemented pagination in similar React-based listings before, with a focus on usability and accessibility. I’ll proceed with a clean and minimal solution and share progress if needed.

Thank you!

[Naitik120gupta]

Can you assign this to me? I am ready to work on this asap.

[Rahul-R79]

Hi @Naitik120gupta @Aishwarya-kamkar09,

Thank you both for your message. I’ve already completed the work for this issue from my side. However, we’ll need confirmation from the collaborators before proceeding further. I’m currently waiting for their response to determine the next steps.

If any assistance is needed in the meantime, I’ll definitely reach out to you. Thanks again for your time and support.

[Rahul-R79]

@FirePheonix Could you please review the changes and let me know if I can move ahead with the next steps (or raise a PR), or if any modifications are required? Your guidance will help ensure the work aligns with the project’s expectations.

[Aishwarya-kamkar09]

Thanks for the update.
I’ll wait for the collaborators’ confirmation.
Please let me know if anything is needed from my side.

[FirePheonix]

@FirePheonix Could you please review the changes and let me know if I can move ahead with the next steps (or raise a PR), or if any modifications are required? Your guidance will help ensure the work aligns with the project’s expectations.

yeah go ahead.