Make RepoEditor an async component to load monaco before mounting

app/assets/javascripts/repo/index.js

@@ -9,7 +9,7 @@ import RepoCommitSection from './repo_commit_section.vue';
 import RepoTabs from './repo_tabs.vue';
 import RepoFileButtons from './repo_file_buttons.vue';
 import RepoBinaryViewer from './repo_binary_viewer.vue';
-import RepoEditor from './repo_editor.vue';
+import RepoEditor from './repo_editor';
 import RepoMiniMixin from './repo_mini_mixin';
 
 function initRepo() {

app/assets/javascripts/repo/repo_editor.vue → app/assets/javascripts/repo/repo_editor.js

-<script>
 /* global monaco */
 import Store from './repo_store';
 import Helper from './repo_helper';
@@ -7,28 +6,28 @@ import monacoLoader from './monaco_loader';
 const RepoEditor = {
   data: () => Store,
 
+  template: '<div id="ide"></div>',
+
   mounted() {
-    monacoLoader(['vs/editor/editor.main'], () => {
-      const monacoInstance = monaco.editor.create(this.$el, {
-        model: null,
-        readOnly: true,
-        contextmenu: false,
-      });
+    const monacoInstance = this.monaco.editor.create(this.$el, {
+      model: null,
+      readOnly: true,
+      contextmenu: false,
+    });
 
-      Store.monacoInstance = monacoInstance;
+    Store.monacoInstance = monacoInstance;
 
-      this.addMonacoEvents();
+    this.addMonacoEvents();
 
-      Helper.getContent().then(() => {
-        this.showHide();
+    Helper.getContent().then(() => {
+      this.showHide();
 
-        if (this.blobRaw === '') return;
+      if (this.blobRaw === '') return;
 
-        const newModel = monaco.editor.createModel(this.blobRaw, 'plaintext');
+      const newModel = this.monaco.editor.createModel(this.blobRaw, 'plaintext');
 
-        this.monacoInstance.setModel(newModel);
-      }).catch(Helper.loadingError);
-    });
+      this.monacoInstance.setModel(newModel);
+    }).catch(Helper.loadingError);
   },
 
   methods: {
@@ -98,18 +97,23 @@ const RepoEditor = {
 
       this.monacoInstance.setModel(null);
 
-      const languages = monaco.languages.getLanguages();
+      const languages = this.monaco.languages.getLanguages();
       const languageID = Helper.getLanguageIDForFile(this.activeFile, languages);
-      const newModel = monaco.editor.createModel(this.blobRaw, languageID);
+      const newModel = this.monaco.editor.createModel(this.blobRaw, languageID);
 
       this.monacoInstance.setModel(newModel);
     },
   },
 };
 
-export default RepoEditor;
-</script>
+function asyncLoadRepoEditor() {
+  return new Promise((resolve) => {
+    monacoLoader(['vs/editor/editor.main'], () => {
+      Store.monaco = monaco;
+
+      resolve(RepoEditor);
+    });
+  });
+}
 
-<template>
-<div id="ide"></div>
-</template>
+export default asyncLoadRepoEditor;

app/assets/javascripts/repo/repo_store.js

@@ -3,6 +3,7 @@ import RepoHelper from './repo_helper';
 
 const RepoStore = {
   ideEl: {},
+  monaco: {},
   monacoInstance: {},
   service: '',
   editor: '',

spec/javascripts/repo/repo_editor_spec.js

 import Vue from 'vue';
-import repoEditor from '~/repo/repo_editor.vue';
+import repoEditor from '~/repo/repo_editor';
 
 describe('RepoEditor', () => {
   function createComponent() {