Add latest changes from gitlab-org/gitlab@master

1 files changed, 16 insertions, 1 deletions

diff --git a/app/assets/javascripts/blob/components/blob_edit_content.vue b/app/assets/javascripts/blob/components/blob_edit_content.vue
index 056b4ea4aa8..c53de2e7746 100644
--- a/app/assets/javascripts/blob/components/blob_edit_content.vue
+++ b/app/assets/javascripts/blob/components/blob_edit_content.vue
@@ -1,6 +1,12 @@
 <script>
 import { initEditorLite } from '~/blob/utils';
 import { debounce } from 'lodash';
+import {
+  SNIPPET_MARK_BLOBS_CONTENT,
+  SNIPPET_MARK_EDIT_APP_START,
+  SNIPPET_MEASURE_BLOBS_CONTENT,
+  SNIPPET_MEASURE_BLOBS_CONTENT_WITHIN_APP,
+} from '~/performance_constants';
 
 export default {
   props: {
@@ -31,6 +37,13 @@ export default {
       blobPath: this.fileName,
       blobContent: this.value,
     });
+    window.requestAnimationFrame(() => {
+      if (!performance.getEntriesByName(SNIPPET_MARK_BLOBS_CONTENT).length) {
+        performance.mark(SNIPPET_MARK_BLOBS_CONTENT);
+        performance.measure(SNIPPET_MEASURE_BLOBS_CONTENT);
+        performance.measure(SNIPPET_MEASURE_BLOBS_CONTENT_WITHIN_APP, SNIPPET_MARK_EDIT_APP_START);
+      }
+    });
   },
   methods: {
     triggerFileChange: debounce(function debouncedFileChange() {
@@ -41,6 +54,8 @@ export default {
 </script>
 <template>
   <div class="file-content code">
-    <pre id="editor" ref="editor" data-editor-loading @keyup="triggerFileChange">{{ value }}</pre>
+    <div id="editor" ref="editor" data-editor-loading @keyup="triggerFileChange">
+      <pre class="editor-loading-content">{{ value }}</pre>
+    </div>
   </div>
 </template>