feat: Replace "Load More" button with Pagination System#681
feat: Replace "Load More" button with Pagination System#681sa-fw-an merged 4 commits intosugarlabs:mainfrom
Conversation
❌ Checks Failed
Please fix the following issues before merging: 📝 Code Linting FailedIssue: Code formatting or style violations detected. Specific problems: • Code formatting issues detected How to fix:
Need help with linting? Check out the Linting Guide for Windows Users for detailed instructions. 🛠️ Next Steps
|
🎉 All Checks Passed!
✅ Completed Workflows
🚀 This PR is ready for review and can be safely merged to Great work! Your code meets all quality standards. 👏 |
|
@FirePheonix I've implemented the new pagination feature to replace the "Load More" button across the News, Author, and Tag pages. The system is responsive and matches the site's design theme. All checks are green now please verify and merge when you get time! Thankyou |
mahesh-09-12
left a comment
mahesh-09-12
left a comment
There was a problem hiding this comment.
Thanks for the contribution!
Overall, this is a solid improvement, introducing a reusable Pagination component and integrating it across NewsPage and AuthorPage improves consistency and readability. The pagination logic is clear, responsive behavior is handled thoughtfully, and the UX feels aligned with the existing design.
I didn’t notice any functional regressions while reading through the changes. A couple of minor follow-ups that might be worth considering (non-blocking):
-
There is some repeated pagination-related logic across pages (e.g., handlePageChange, scroll-to-top behavior) that could potentially be abstracted later if this pattern grows.
-
It may be useful to add a short comment or doc note clarifying the mobile pagination behavior for future contributors.
Otherwise, this looks good from a code-quality and UX perspective 👍
🎉 All Checks Passed!
✅ Completed Workflows
🚀 This PR is ready for review and can be safely merged to Great work! Your code meets all quality standards. 👏 |
|
@mahesh-09-12 Thanks for the review! I've added the comment explaining the mobile pagination behavior as suggested. |
mahesh-09-12
left a comment
mahesh-09-12
left a comment
There was a problem hiding this comment.
Thanks for the update 👍
The added comments clearly explain the mobile pagination behavior and improve readability.
This looks good to me now.
|
@Rahul-R79 I am not sure if this PR is to be merged or not. The PR looks good, but let me think for sometime if we really need a UI change. |
3 participants
📝 Description
Refactored the post navigation system in the News, Author, and Tag pages to significantly improve user experience and performance.
Previously, these pages utilized a "Load More" button which simply appended more items to the current list. This approach could lead to performance issues with large datasets and made it difficult for users to navigate to specific sections of the news feed.
This PR introduces the following changes:
New Component: Created a reusable, responsive Pagination component (src/components/Pagination.tsx) featuring:
Previous/Next navigation buttons. Smart page numbering with ellipses for large page counts. Active page highlighting with gradient styling. Smooth hover and click animations using framer-motion.
News Page Refactor: Completely replaced the "Load More" logic in NewsPage.tsx with a page-based system. Implemented currentPage state management. Added auto-scroll to top on page change for better UX. Ensured filters (Search, Category) automatically reset the view to Page 1.
Author & Tag Page Refactor: Applied the same pagination logic to AuthorPage.tsx and TagPage.tsx for a consistent experience across the site.
Cleanup: Removed unused imports and icons associated with the legacy "Load More" button.
🔗 Related Issue
Fixes #672
🔄 Type of Change
📷 Visual Changes
BEFORE
26.12.2025_18.05.42_REC.mp4
AFTER
26.12.2025_18.02.09_REC.mp4