Improve label dropdown selection performance
Our label dropdown has been slow for a whiiiiile. I expected there to be a number of issues about this, but I couldn't find any from a quick search so its probably bystander effect.
When we update the label list within the dropdown, we experience DOM render blocking. Going from a filtered state to an unfiltered state has the clearest impact because of the total size of the collection. This is a sign that we can improve the strategy for measured and perceived performance. i.e. blocking causes the initial BE request seem slower than it is. It also makes the browser measurably slow.
I would love to set this ~P3 but it depends on the average number of labels per root namespace. We have a lot of labels so it could affect us the most.
Screen_Recording_2019-02-14_at_17.54.34
Screen_Recording_2019-02-14_at_17.52.35
(Sorry, I ran with profile with extensions)
Note the 3s event handler duration.
Note the sawtooth heap during that time, GC is having "fun".
How we can improve this:
- Don't load all labels on initial request. (505 labels available for this issue, I will use a few)
- Paginate labels on scroll
- Request filtered label list from BE
- Show a non-blocking auxiliary loading indicator when filtering
- Debounce user input
- (The root cause, I think) Don't do this https://gitlab.com/gitlab-org/gitlab-ce/blob/e842df60545797da5cc3bbd0b3fd446eabf79476/app/assets/javascripts/gl_dropdown.js#L661-673 and even better start using Vue? This file used to be the FE battleground, the only script to never lose. Let's make it a greener pasture. :D