1 files changed, 50 insertions, 46 deletions
diff --git a/app/assets/javascripts/diffs/index.js b/app/assets/javascripts/diffs/index.js
index bddc28c4758..1b1ab59b2b4 100644
--- a/app/assets/javascripts/diffs/index.js
+++ b/app/assets/javascripts/diffs/index.js
@@ -3,7 +3,6 @@ import Vue from 'vue';
 import { mapActions, mapState, mapGetters } from 'vuex';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import { getParameterValues } from '~/lib/utils/url_utility';
-import FindFile from '~/vue_shared/components/file_finder/index.vue';
 import eventHub from '../notes/event_hub';
 import diffsApp from './components/app.vue';
 
@@ -12,51 +11,7 @@ import { getReviewsForMergeRequest } from './utils/file_reviews';
 import { getDerivedMergeRequestInformation } from './utils/merge_request';
 
 export default function initDiffsApp(store) {
-  const fileFinderEl = document.getElementById('js-diff-file-finder');
-
-  if (fileFinderEl) {
-    // eslint-disable-next-line no-new
-    new Vue({
-      el: fileFinderEl,
-      store,
-      computed: {
-        ...mapState('diffs', ['fileFinderVisible', 'isLoading']),
-        ...mapGetters('diffs', ['flatBlobsList']),
-      },
-      watch: {
-        fileFinderVisible(newVal, oldVal) {
-          if (newVal && !oldVal && !this.flatBlobsList.length) {
-            eventHub.$emit('fetchDiffData');
-          }
-        },
-      },
-      methods: {
-        ...mapActions('diffs', ['toggleFileFinder', 'scrollToFile']),
-        openFile(file) {
-          window.mrTabs.tabShown('diffs');
-          this.scrollToFile(file.path);
-        },
-      },
-      render(createElement) {
-        return createElement(FindFile, {
-          props: {
-            files: this.flatBlobsList,
-            visible: this.fileFinderVisible,
-            loading: this.isLoading,
-            showDiffStats: true,
-            clearSearchOnClose: false,
-          },
-          on: {
-            toggle: this.toggleFileFinder,
-            click: this.openFile,
-          },
-          class: ['diff-file-finder'],
-        });
-      },
-    });
-  }
-
-  return new Vue({
+  const vm = new Vue({
     el: '#js-diffs-app',
     name: 'MergeRequestDiffs',
     components: {
@@ -157,4 +112,53 @@ export default function initDiffsApp(store) {
       });
     },
   });
+
+  const fileFinderEl = document.getElementById('js-diff-file-finder');
+
+  if (fileFinderEl) {
+    // eslint-disable-next-line no-new
+    new Vue({
+      el: fileFinderEl,
+      store,
+      components: {
+        FindFile: () => import('~/vue_shared/components/file_finder/index.vue'),
+      },
+      computed: {
+        ...mapState('diffs', ['fileFinderVisible', 'isLoading']),
+        ...mapGetters('diffs', ['flatBlobsList']),
+      },
+      watch: {
+        fileFinderVisible(newVal, oldVal) {
+          if (newVal && !oldVal && !this.flatBlobsList.length) {
+            eventHub.$emit('fetchDiffData');
+          }
+        },
+      },
+      methods: {
+        ...mapActions('diffs', ['toggleFileFinder', 'scrollToFile']),
+        openFile(file) {
+          window.mrTabs.tabShown('diffs');
+          this.scrollToFile(file.path);
+        },
+      },
+      render(createElement) {
+        return createElement('find-file', {
+          props: {
+            files: this.flatBlobsList,
+            visible: this.fileFinderVisible,
+            loading: this.isLoading,
+            showDiffStats: true,
+            clearSearchOnClose: false,
+          },
+          on: {
+            toggle: this.toggleFileFinder,
+            click: this.openFile,
+          },
+          class: ['diff-file-finder'],
+        });
+      },
+    });
+  }
+
+  return vm;
 }