Lazy-load more items in Epic Tree on scroll
Summary
In Epic tree (introduced in https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/10999), we're limiting the number of child items the API returns on page load in order to reduce GraphQL query complexity, but since an Epic can any number of children, we need to handle this page limit by having some sort of pagination in place. One way of doing is by handling data size as follows;
Imagine an Epic A
has 500 direct child items (both Epics and Issues combined), and one of the child epic Epic Child C
has further 300 items. Then a possible approach to handle this situation can be as follows;
- We load only 50 children of
Epic A
on page load.- Once user scrolls to bottom of the tree, we load next 50 children.
- In case user tries of expand child epic
Epic Child C
(which is direct child ofEpic A
), we show only first 50 items.- At the end of these 50 items, we show a placeholder link which says;
Open 'Epic Child C' to show all children
.
- At the end of these 50 items, we show a placeholder link which says;