Add loader and fix bugs

app/assets/javascripts/repo/components/repo_edit_button.vue

@@ -24,6 +24,20 @@ export default {
       Store.toggleBlobView();
     },
   },
+
+  watch: {
+    editMode() {
+      if (this.editMode) {
+        $('.project-refs-form').addClass('disabled');
+        $('.fa-long-arrow-right').show();
+        $('.project-refs-target-form').show();
+      } else {
+        $('.project-refs-form').removeClass('disabled');
+        $('.fa-long-arrow-right').hide();
+        $('.project-refs-target-form').hide();
+      }
+    },
+  }
 }
 </script>
 

app/assets/javascripts/repo/components/repo_editor.vue

@@ -7,6 +7,13 @@ import Helper from '../helpers/repo_helper';
 const RepoEditor = {
   data: () => Store,
 
+  destroyed() {
+    // this.monacoInstance.getModels().forEach((m) => {
+    //   m.dispose();
+    // });
+    this.monacoInstance.destroy();
+  },
+
   mounted() {
     Service.getRaw(this.activeFile.raw_path)
     .then((rawResponse) => {
@@ -67,26 +74,15 @@ const RepoEditor = {
       });
     },
 
-    editMode() {
-      if (this.editMode) {
-        $('.project-refs-form').addClass('disabled');
-        $('.fa-long-arrow-right').show();
-        $('.project-refs-target-form').show();
-      } else {
-        $('.project-refs-form').removeClass('disabled');
-        $('.fa-long-arrow-right').hide();
-        $('.project-refs-target-form').hide();
-      }
-    },
-
     activeFileLabel() {
       this.showHide();
     },
 
     dialog: {
       handler(obj) {
-        if (obj.status) {
-          obj.status = false; // eslint-disable-line no-param-reassign
+        let newObj = obj;
+        if (newObj.status) {
+          newObj.status = false;
           this.openedFiles.map((file) => {
             const f = file;
             if (f.active) {

app/assets/javascripts/repo/components/repo_preview.vue

 <script>
-import RepoStore from '../stores/repo_store';
+import Store from '../stores/repo_store';
 
 export default {
-  data: () => RepoStore,
-  
+  data: () => Store,
+  mounted() {
+    $(this.$el).find('.file-content').syntaxHighlight();
+  },
   computed: {
     html() {
       return this.activeFile.html;
@@ -11,13 +13,11 @@ export default {
   },
 
   watch: {
-
     html() {
       this.$nextTick(() => {
         $(this.$el).find('.file-content').syntaxHighlight();
       });
     }
-
   }
 }
 </script>

app/assets/javascripts/repo/helpers/monaco_loader_helper.js

@@ -4,10 +4,11 @@ import RepoStore from '../stores/repo_store';
 import monacoLoader from '../monaco_loader';
 
 function repoEditorLoader() {
+  RepoStore.monacoLoading = true;
   return new Promise((resolve) => {
     monacoLoader(['vs/editor/editor.main'], () => {
       RepoStore.monaco = monaco;
-
+      RepoStore.monacoLoading = false;
       resolve(RepoEditor);
     });
   });

app/assets/javascripts/repo/stores/repo_store.js

@@ -5,6 +5,7 @@ import RepoService from '../services/repo_service';
 const RepoStore = {
   ideEl: {},
   monaco: {},
+  monacoLoading: false,
   monacoInstance: {},
   service: '',
   editor: '',

app/assets/stylesheets/pages/repo.scss

@@ -7,6 +7,19 @@
   transition: opacity .5s;
 }
 
+.blob-viewer {
+  padding: 20px;
+}
+
+.monaco-loader {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0,0,0,0.2);
+}
+
 .modal.popup-dialog {
   display: block;