Roadmap pagination
Problem to solve
On roadmaps, we currently retrieve all Epics. This allows us to handle the sorting on the frontend. There are already performance issues as the payload to send all Epics can get fairly large.
Let's use this issue to discuss ways to solve for this. @kushalpandya, you have mentioned a couple ideas. Would you mind including them here?
Alternatives as discussed in Plan Team Call
- We limit the number of epics we render on Roadmap based on Viewport height (AKA Buffered rendering).
- We add/remove items on vertical scroll.
- We insert new Epics on Horizontal scroll.
- We apply sorting only on what’s visible on Viewport.
- With option 1., sort order of items would look out of place if user intends to reach all the way to the bottom of
list based on currently applied sort order, so one more alternative is;
- We move sorting logic to backend (now that GraphQL has only 100 items to deal with per request).
- We continue the rest of the approach as mentioned in 1.
Buffered Rendering Addressed in !19875 (merged)
Buffered rendering is an approach where entire data lives in an object but only the items which can be fit in viewport is rendered on DOM, leading to significantly better performance (and way less page memory footprint). This can be implemented in Roadmap app given that it is a Vuex app, but why re-invent a wheel when there are several light-weight and decent Vue plugins available to do the same. Below are some of those plugins (both have decent API and are actively maintained).
⚠ Blocked by
- Use VueApollo for Roadmap: &9292 (closed) per this comment