Lazy render the diff line comment button
We always render the diff line comment button for every row if the user can comment on the line, for small merge request its probably not an issue for performance. However, the larger the merge request gets the more buttons get created with icons inside of them. This has a performance cost that gets more notable on large diffs.
An idea that I had is that we could do the following:
- Change the
v-if
to not render the button when the diff table cell gets mounted. - When the user hovers over a line the button
v-if
then turns to render the button and it gets shown. - Once the button has already been shown once we keep it in the DOM and change with
v-show
instead.- Might be a different issue, but worth looking into rendering this with CSS by possibily just changing a class?
See this component https://gitlab.com/gitlab-org/gitlab/-/blob/58780e9881e5ea6ea4c8a354d01c7bf63cf55528/app/assets/javascripts/diffs/components/diff_table_cell.vue#L155-165
/cc @andr3