feat: Implement Infinite Scroll on Historical Polls Page

[juliopavila]

Description

This pull request introduces the infinite scroll functionality to the historical polls page, enhancing user experience by dynamically loading more poll results as the user scrolls. This implementation includes optimizations for both mobile and desktop platforms, ensuring smooth and efficient data loading.

Changes Made

1. HistoricPoll.tsx

   • State Management: Added state variables visiblePolls, page, and loadingMore to manage poll visibility, pagination, and loading state.
   • Load More Polls: Implemented the loadMorePolls function to handle the logic for loading more polls with a delay.
   • Debounce Utility: Integrated the debounce utility to handle scroll events efficiently and prevent excessive function calls.
   • Scroll Event Handling: Modified the handleScroll function to detect when the user has scrolled to the bottom and load additional polls.
   • Initialization and Updates: Adjusted useEffect hooks to initialize and update the visiblePolls state based on the current page and total polls available.
   • Smooth Scroll Adjustment: Ensured that the scroll position moves slightly up when new polls are loaded, avoiding continuous triggering of the infinite scroll.

2. methods.ts

   • Debounce Utility: Added a debounce utility function to limit the frequency of function execution, improving performance during scroll events.

Screenshots

• Mobile: Mobile Infinite Scroll Video
• Desktop: Desktop Infinite Scroll Video

Testing Instructions

1. Navigate to the Historical Polls Page: Ensure you have access to the page with historical poll results.
2. Scroll Down: Scroll to the bottom of the page to trigger the infinite scroll.
3. Observe Loading: Verify that additional polls are loaded and the scroll position adjusts smoothly.
4. Check Responsiveness: Test the functionality on both mobile and desktop devices to ensure consistency.

Additional Notes

• The debounce delay is set to 200ms to balance responsiveness and performance.
• A scroll adjustment of 150px is applied after loading more polls to prevent continuous triggering of the scroll event.

By implementing these changes, the historical polls page will provide a more seamless and efficient user experience with infinite scrolling capabilities.

[auryn-macmillan]

lgtm