Improve subsequent files rendering after "show more" button is clicked

In this MR > !38733 (merged), we added a stop to limit the files being displayed at 1000 files with a "Show more" button. However, once that button is clicked, it will continue to fetch all the files until the end. This can still cause problems if there is a very large amount of files to load.

Possible Solutions

We can implement a pagination solution > https://design.gitlab.com/components/pagination

image

However, this can be problematic as we're using > https://docs.gitlab.com/ee/development/fe_guide/graphql.html#working-with-pagination

GitLab’s GraphQL API uses Relay-style cursor pagination for connection types.

The concern is that we don't have access to know the total pages. These are the fields we have:

pageInfo {
  endCursor
  hasNextPage
  hasPreviousPage
  startCursor
}

The advantage of this type of pagination architecture is its better performance than regular pagination styles. So if we want to keep with what we have, we might want to consider something like an infinite scroll or this:

image

Edited by Samantha Ming