eclipse-tractusx / eclipse-tractusx/portal-shared-components

Use automatic load-more-on-end-of-list instead of load-more button

Open
#286 0 comments 0 reactions 1 assignee Claimed by @MaximilianHauer View on GitHub
enhancement
Dominant language
TypeScript
Stars
2
Forks
19
PR merge metrics
No merged PRs in 30d

Description

### Description

In the portal backend most API endpoints that return a list of items implement a paging concept loading only a fixed number of items at a time to avoid heavy server load and long loading times. On the frontend side we provide a `PageLoadingTable` which handles the loading. Currently at the end of the list there is a 'Load More' button to fetch the next page of items.
https://github.com/eclipse-tractusx/portal-shared-components/blob/main/src/components/basic/Table/PageLoadingTable.tsx#L142-L155

This concept of a manual trigger seems old-fashioned. We suggest a state of the art loading mechanism that automatically fetches the next page of items as the user is scrolling down, reaching the end of the list.

### Acceptance Criteria

- [ ] [load more button has been removed from the page loading table]
- [ ] [next page fetch is triggered once the end of the table comes into view (ideally already a little bit before that)]
- [ ] [a loading icon is shown while the fetch is in progress]
- [ ] [if there are no more items no fetch must be triggered and no loading icon shown - instead a hint that all items have been loaded]

### Additional Information

A loading mechanism like described has already been implemented as proof of concept in the Notification Center of the portal frontend
https://github.com/eclipse-tractusx/portal-frontend/blob/main/src/components/pages/NotificationCenter/NotificationPager.tsx
However that implementation is using the Redux application state which we have not in the shared components.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.