Merge branch 'leipert-render-file-finder-overlay-only-when-needed' into 'master'

Only render FileFinderOverlay when needed

See merge request gitlab-org/gitlab!65481

app/assets/javascripts/diffs/index.js

@@ -50,9 +50,6 @@ export default function initDiffsApp(store) {
             click: this.openFile,
           },
           class: ['diff-file-finder'],
-          style: {
-            display: this.fileFinderVisible ? '' : 'none',
-          },
         });
       },
     });

app/assets/javascripts/ide/components/ide.vue

@@ -130,7 +130,6 @@ export default {
     <div class="ide-view flex-grow d-flex">
       <template v-if="loadDeferred">
         <find-file
-          v-show="fileFindVisible"
           :files="allBlobs"
           :visible="fileFindVisible"
           :loading="loading"

app/assets/javascripts/vue_shared/components/file_finder/index.vue

@@ -103,6 +103,9 @@ export default {
     focusedIndex() {
       if (!this.mouseOver) {
         this.$nextTick(() => {
+          if (!this.$refs.virtualScrollList?.$el) {
+            return;
+          }
           const el = this.$refs.virtualScrollList.$el;
           const scrollTop = this.focusedIndex * FILE_FINDER_ROW_HEIGHT;
           const bottom = this.listShowCount * FILE_FINDER_ROW_HEIGHT;
@@ -218,7 +221,7 @@ export default {
 </script>
 
 <template>
-  <div class="file-finder-overlay" @mousedown.self="toggle(false)">
+  <div v-if="visible" class="file-finder-overlay" @mousedown.self="toggle(false)">
     <div class="dropdown-menu diff-file-changes file-finder show">
       <div :class="{ 'has-value': showClearInputButton }" class="dropdown-input">
         <input

spec/frontend/vue_shared/components/file_finder/index_spec.js

@@ -154,6 +154,16 @@ describe('File finder item spec', () => {
       });
     });
 
+    describe('DOM Performance', () => {
+      it('renders less DOM nodes if not visible by utilizing v-if', async () => {
+        vm.visible = false;
+
+        await waitForPromises();
+
+        expect(vm.$el).toBeInstanceOf(Comment);
+      });
+    });
+
     describe('watches', () => {
       describe('searchText', () => {
         it('resets focusedIndex when updated', (done) => {
@@ -169,7 +179,7 @@ describe('File finder item spec', () => {
       });
 
       describe('visible', () => {
-        it('returns searchText when false', (done) => {
+        it('resets searchText when changed to false', (done) => {
           vm.searchText = 'test';
           vm.visible = true;