Change toggle file to hide instead of remove

https://gitlab.com/gitlab-org/gitlab/-/merge_requests/26181

app/assets/javascripts/diffs/components/diff_file.vue

@@ -179,18 +179,19 @@ export default {
         <div v-if="errorMessage" class="diff-viewer">
           <div class="nothing-here-block" v-html="errorMessage"></div>
         </div>
-        <div v-else-if="isCollapsed" class="nothing-here-block diff-collapsed">
-          {{ __('This diff is collapsed.') }}
-          <a class="click-to-expand js-click-to-expand" href="#" @click.prevent="handleToggle">{{
-            __('Click to expand it.')
-          }}</a>
-        </div>
-        <diff-content
-          v-else
-          :class="{ hidden: isCollapsed || isFileTooLarge }"
-          :diff-file="file"
-          :help-page-path="helpPagePath"
-        />
+        <template v-else>
+          <div v-show="isCollapsed" class="nothing-here-block diff-collapsed">
+            {{ __('This diff is collapsed.') }}
+            <a class="click-to-expand js-click-to-expand" href="#" @click.prevent="handleToggle">{{
+              __('Click to expand it.')
+            }}</a>
+          </div>
+          <diff-content
+            v-show="!isCollapsed && !isFileTooLarge"
+            :diff-file="file"
+            :help-page-path="helpPagePath"
+          />
+        </template>
       </div>
     </template>
   </div>

changelogs/unreleased/jdb-hide-dont-remove-collapsed-files.yml

+---
+title: Improved MR toggle file performance by hiding instead of removing
+merge_request: 26181
+author:
+type: performance

spec/javascripts/diffs/components/diff_file_spec.js

@@ -23,6 +23,9 @@ describe('DiffFile', () => {
     vm.$destroy();
   });
 
+  const findDiffContent = () => vm.$el.querySelector('.diff-content');
+  const isVisible = el => el.style.display !== 'none';
+
   describe('template', () => {
     it('should render component with file header, file content components', done => {
       const el = vm.$el;
@@ -69,13 +72,13 @@ describe('DiffFile', () => {
 
     describe('collapsed', () => {
       it('should not have file content', done => {
-        expect(vm.$el.querySelectorAll('.diff-content').length).toEqual(1);
+        expect(isVisible(findDiffContent())).toBe(true);
         expect(vm.isCollapsed).toEqual(false);
         vm.isCollapsed = true;
         vm.file.renderIt = true;
 
         vm.$nextTick(() => {
-          expect(vm.$el.querySelectorAll('.diff-content').length).toEqual(0);
+          expect(isVisible(findDiffContent())).toBe(false);
 
           done();
         });