Improve diff tree list performance
At the moment we always created and mount the diff tree list component even if the component is hidden by the user https://gitlab.com/gitlab-org/gitlab/-/blob/559c62f76716ec7338e4abc42214e2ea06655f3b/app/assets/javascripts/diffs/components/app.vue#L401
For large diffs, this means we creating a lot of components that may never get shown to the user because they might never toggle the tree list or if the tree list gets hidden automatically by the size of the screen (mobile for example)
Few options to fix this:
- Maybe keep as is and optimize some child components (though maybe we should optimize as well)
- Change to a
v-if
. We get the best performance on initial render as its not going anything, but we may see some slow down when the user toggles the tree view. - Change to use the Vue virtual scroll list that we have available. This is probably fine UX wise as we have the search bar and also
cmd+f
(or windows equivalent) will work for the diff files themselves.
We could also combine 1 & 2 and go for the best performance gain possible
/cc @andr3
Edited by André Luís