Skip to content

fix(#674): paginate pools list with Load More + search/filter - #701

Open
oluwaseyi1996-netizen wants to merge 1 commit into
chunks-labz:mainfrom
oluwaseyi1996-netizen:fix/674-pools-pagination
Open

fix(#674): paginate pools list with Load More + search/filter#701
oluwaseyi1996-netizen wants to merge 1 commit into
chunks-labz:mainfrom
oluwaseyi1996-netizen:fix/674-pools-pagination

Conversation

@oluwaseyi1996-netizen

Copy link
Copy Markdown

Closes #674

Summary

Adds client-side Load More pagination to the pools list on PoolIntegration, plus a lightweight search input and status pill filter so the pagination is demonstrably compatible with search and filter features as required by the issue.

Acceptance criteria from #674

  • Load More button at bottom of list
  • Page size constant POOLS_PER_PAGE = 20
  • Initial load shows only first page
  • Load More appends the next page
  • Load More is disabled once all (filtered) pools are visible
  • Proper loading + empty-state handling
  • Compatible with search and filter — both reset pagination to page 1

Changes

  • web/app/components/PoolIntegration.tsx

    • Adds POOLS_PER_PAGE = 20 constant
    • Adds text search input + status pill (All / Active / Settled) backed by useId, sr-only label, role="group" with aria-label
    • Adds <button type="button">Load More</button> gated on filteredPools.length > POOLS_PER_PAGE so we do not render a noisy disabled button on small lists
    • Uses aria-label with dynamic remaining count and a role="status" aria-live="polite" line announcing Showing X of Y pools
    • Refresh resets pagination to page 1 of fresh data; filter changes reset to page 1 of the new view
  • web/tests/components/PoolIntegration.test.tsx

    • Adds 7 tests covering initial page size, Load More increments, disabled state at exhaustion, no-button on small lists, status filter + search filter interact correctly with pagination, and refresh resetting to page 1
    • The duplicate-Settled text edge case (status pill + pool-card badge) is handled via getAllByText

Testing

  • node_modules/.bin/vitest run tests/components/PoolIntegration.test.tsx23/23 pass
  • node_modules/.bin/eslint app/components/PoolIntegration.tsx tests/components/PoolIntegration.test.tsx → clean
  • node_modules/.bin/tsc --noEmit app/components/PoolIntegration.tsx → clean
  • Pre-existing failures in tests/lib/formatting.test.ts, tests/lib/analytics.test.ts, tests/lib/disputes/feature-flag.test.tsx, tests/integration/navbar-auth.integration.test.tsx, tests/routes/smoke.test.tsx were confirmed pre-existing on main via git stash + vitest run (these are unrelated to this change)

Risks and follow-ups

  • Pagination is client-side (the API still returns the full list). A follow-up could move to true server-side pagination in enhanced-stacks-api.fetchAllPools which already accepts page/pageSize.
  • Stats still reflect the total fetched pool counts (not just visible), which is the right call for a "platform health" header.

Closes #674

- Add POOLS_PER_PAGE=20 client-side pagination to PoolIntegration
- Add search input + status filter pills (All/Active/Settled) that
  paginate the filtered list (issue chunks-labz#674 acceptance criteria)
- Add "Load More" button that is disabled once every filtered pool
  is visible, with role="status" live region announcing the count
- Refresh now resets pagination to page 1 of fresh data
- Use useId() for stable label/input association
- Add 7 tests covering initial page size, Load More click, disable
  at exhaustion, no-button on small lists, status + text-search
  filter interaction, and refresh resetting to page 1
@drips-wave

drips-wave Bot commented Jun 28, 2026

Copy link
Copy Markdown

@oluwaseyi1996-netizen Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@github-actions

github-actions Bot commented Sep 4, 2026

Copy link
Copy Markdown
Contributor

This pull request has been inactive for 21 days. It will be closed in 7 days unless there is further activity. Please rebase, address review comments, or leave a note if you need more time.

@github-actions github-actions Bot added the stale label Sep 4, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Web: Add pagination to pools list

1 participant