trent_larson/crowd-funder-for-time-pwa
4
1
Fork 2
Code Issues Pull Requests 23 Releases 5 Wiki Activity

feat(EntityGrid): implement infinite scroll for entity lists #215

Merged
jose merged 1 commits from entity-selection-list-component-infinite-scroll into entity-selection-list-component 2025-11-05 07:52:30 +00:00
Conversation 0 Commits 1 Files Changed 3
+124 -46
jose commented 2025-11-03 13:50:28 +00:00
Owner
Copy Link
Copy Source

Add infinite scroll functionality to EntityGrid component using VueUse's
useInfiniteScroll composable to handle large volumes of entities efficiently.

Changes:

  • Integrate @vueuse/core useInfiniteScroll composable
  • Add infinite scroll state management (displayedCount, reset function)
  • Configure initial batch size (20 items) and increment size (20 items)
  • Update displayedEntities, alphabeticalContacts to support progressive loading
  • Add canLoadMore() logic for people, projects, and search modes
  • Reset scroll state when search term or entities prop changes
  • Remove maxItems prop (replaced by infinite scroll)
  • Simplify displayEntitiesFunction signature (removed maxItems parameter)
  • Update EntitySelectionStep and test files to remove max-items prop

Technical details:

  • Uses template ref (scrollContainer) to access scrollable container
  • Recent contacts (3) count toward initial batch for people grid
  • Special entities (You, Unnamed) always displayed, don't count toward limits
  • Infinite scroll works for both entity types and search results
  • Constants are configurable at top of component (INITIAL_BATCH_SIZE, INCREMENT_SIZE)

This improves performance and UX when displaying large lists of contacts or
projects by loading content progressively as users scroll.

Add infinite scroll functionality to EntityGrid component using VueUse's useInfiniteScroll composable to handle large volumes of entities efficiently. Changes: - Integrate @vueuse/core useInfiniteScroll composable - Add infinite scroll state management (displayedCount, reset function) - Configure initial batch size (20 items) and increment size (20 items) - Update displayedEntities, alphabeticalContacts to support progressive loading - Add canLoadMore() logic for people, projects, and search modes - Reset scroll state when search term or entities prop changes - Remove maxItems prop (replaced by infinite scroll) - Simplify displayEntitiesFunction signature (removed maxItems parameter) - Update EntitySelectionStep and test files to remove max-items prop Technical details: - Uses template ref (scrollContainer) to access scrollable container - Recent contacts (3) count toward initial batch for people grid - Special entities (You, Unnamed) always displayed, don't count toward limits - Infinite scroll works for both entity types and search results - Constants are configurable at top of component (INITIAL_BATCH_SIZE, INCREMENT_SIZE) This improves performance and UX when displaying large lists of contacts or projects by loading content progressively as users scroll.
jose added 1 commit 2025-11-03 13:50:28 +00:00
feat(EntityGrid): implement infinite scroll for entity lists d32cca4f53 
Add infinite scroll functionality to EntityGrid component using VueUse's
useInfiniteScroll composable to handle large volumes of entities efficiently.

Changes:
- Integrate @vueuse/core useInfiniteScroll composable
- Add infinite scroll state management (displayedCount, reset function)
- Configure initial batch size (20 items) and increment size (20 items)
- Update displayedEntities, alphabeticalContacts to support progressive loading
- Add canLoadMore() logic for people, projects, and search modes
- Reset scroll state when search term or entities prop changes
- Remove maxItems prop (replaced by infinite scroll)
- Simplify displayEntitiesFunction signature (removed maxItems parameter)
- Update EntitySelectionStep and test files to remove max-items prop

Technical details:
- Uses template ref (scrollContainer) to access scrollable container
- Recent contacts (3) count toward initial batch for people grid
- Special entities (You, Unnamed) always displayed, don't count toward limits
- Infinite scroll works for both entity types and search results
- Constants are configurable at top of component (INITIAL_BATCH_SIZE, INCREMENT_SIZE)

This improves performance and UX when displaying large lists of contacts or
projects by loading content progressively as users scroll.
jose merged commit e42552c67a into entity-selection-list-component 2025-11-05 07:52:30 +00:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
No items
No labels
Milestone
No items
No Milestone
Assignees
Clear assignees
anomalist jose (Jose Olarte 3) jsnbuchanan kentbull (Kent Bull) trentlarson
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: trent_larson/crowd-funder-for-time-pwa#215