[Feature] Lazy-load campaigns via infinite query + virtual scroll (#598) by Kaybee973 · Pull Request #719 · Iris-IV/ProofOfHeart-frontend

Kaybee973 · 2026-06-30T08:54:15Z

Summary

Fixes #598 by replacing the monolithic campaign fetch + client-side slice pagination with chunked infinite-query fetching and a DOM-virtualized grid powered by @tanstack/react-virtual. This dramatically reduces initial load time and keeps the DOM lean when browsing 100+ campaigns.

Problem

The causes page called getAllCampaigns() which sequentially fetched every campaign from the Soroban contract via get_campaign(id) before rendering anything. With 100+ campaigns that means 101+ contract calls on page load. All campaigns were rendered as DOM nodes, degrading scroll performance proportionally to the campaign count.

Client-side pagination (visibleCount slice with a "Load More" button) reduced what the user saw but not what the browser had to manage in memory.

Solution

Two independent but complementary changes:

1. Chunked infinite-query data loading

New getCampaignsChunk(startIndex, limit) in contractClient.ts — fetches a range of campaigns by ID in parallel, returning { campaigns, totalCount }
useCampaigns refactored to useInfiniteQuery — loads the first chunk immediately (20 campaigns), then auto-fetches remaining chunks in the background so filtering, sorting, and vote-count loading work on the complete dataset
CAMPAIGNS_CHUNK_SIZE = 20 added to causesList.ts

2. Virtual scrolling

@tanstack/react-virtual installed
useWindowVirtualizer replaces the CSS grid's .map() with a row-based virtualizer that only renders the 2-3 rows visible in the viewport (plus overscan)
useColumns() breakpoint hook groups campaigns into rows matching the current CSS grid column count (1/2/3)
The old "Load More" button is replaced with a subtle spinner that appears while remaining chunks are still loading

Changes

File	Change
`package.json`	Added `@tanstack/react-virtual` dependency
`src/lib/contractClient.ts`	Added `getCampaignsChunk(startIndex, limit)`
`src/lib/causesList.ts`	Added `CAMPAIGNS_CHUNK_SIZE = 20`
`src/hooks/useCampaigns.ts`	Refactored from `useQuery` to `useInfiniteQuery` with chunked fetching
`src/app/[locale]/causes/CausesClient.tsx`	Replaced "Load More" grid with `CampaignVirtualGrid` using `useWindowVirtualizer`; auto-fetches remaining pages; removes `visibleCount`/`CAUSES_PAGE_SIZE`
`src/__tests__/hooks/useCampaigns.test.tsx`	Updated to mock `getCampaignsChunk`; added pagination controls test
`src/__tests__/integration/CausesFilterUrlSync.test.tsx`	Added `matchMedia` stub; updated `useCampaigns` mock with new fields

Testing

✅ useCampaigns unit tests: loading → success, loading → error, pagination controls, refetch — all pass
✅ CausesFilterUrlSync integration tests: all 3 tests pass
✅ TypeScript type-check: no errors
✅ ESLint: 0 errors (pre-existing warnings only)

…V#598) - Install @tanstack/react-virtual for DOM-efficient grid rendering - Add getCampaignsChunk(startIndex, limit) to contractClient for chunked campaign fetching - Refactor useCampaigns from useQuery to useInfiniteQuery, loading campaigns in chunks (20 per page) - Auto-fetch remaining chunks in background so filter/sort work on the full dataset - Replace the client-side slice + 'Load More' button in CausesClient with a window-virtualized grid (useWindowVirtualizer) - Add useColumns() breakpoint hook for responsive row grouping - Add CAMPAIGNS_CHUNK_SIZE constant alongside existing CAUSES_PAGE_SIZE - Update useCampaigns tests for the new paginated contract API - Add matchMedia stub to CausesFilterUrlSync integration test

drips-wave · 2026-06-30T08:54:25Z

@Kaybee973 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

sshdopey · 2026-06-30T08:54:29Z