Task 4.1: Implement Pagination with "Load More" Button

[rowantervelde]

Epic: #11 (Epic 4: Edge Cases, Performance & Testing)
Type: Enhancement
Priority: P1 (High)
Estimate: 1 day

Description

Implement "Load More" pagination pattern for article lists to handle large datasets efficiently. Display 20 articles initially with ability to load more in batches.

Acceptance Criteria

• Display first 20 articles on page load
• Show "Load More" button when additional articles exist
• Load 20 more articles per click
• Hide button when all articles loaded
• Maintain sort order during pagination
• Preserve expanded state when loading more
• Update article count display: "Showing X of Y articles"

Technical Notes

• Update ArticleList component with pagination state
• Use computed property for paginated article subset
• Track currentPage or visibleCount in component state
• Disable button during loading
• Consider virtual scrolling for very large datasets

Dependencies

• Blocks: None
• Blocked by: Task 2.1 (ArticleList component)

Test Coverage

• Unit test: pagination state management
• E2E test: TC-17 (Large Article Sets)
• Performance test: 100+ article pagination

Related Files

• app/components/ArticleList.vue
• specs/004-sentiment-detail/testplan.md (TC-17)

---

Part of Feature 004: Sentiment Detail Breakdown Page