Change toggle file to hide instead of remove

What does this MR do?

Relates to: #26693 (closed)

This is a small iteration towards "Expanding/collapsing diff in large MR should happen instantly"

Currently, the expand/collapse toggle uses v-if so it is actually creating/destroying dom elements when toggled. This MR switches to using CSS to hide and show instead. This will not help files that are yet to be loaded from the API when you first expand them (see the loading indicator in the screencap below) but does make all other files and subsequent clicks almost instant.

Screenshots

Before: It's hard to tell when the clicks happen but each expand/collapse takes around 3 seconds

before-show

After: Here each expand/collapse takes less than a second

after-show

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

Merge request reports

Loading