Performance measurement for Snippet Edit view

app/assets/javascripts/blob/components/blob_edit_content.vue

 <script>
 import { initEditorLite } from '~/blob/utils';
 import { debounce } from 'lodash';
+import {
+  SNIPPET_MARK_BLOB_CONTENT,
+  SNIPPET_MARK_EDIT_APP_START,
+  SNIPPET_MEASURE_BLOB_CONTENT,
+  SNIPPET_MEASURE_BLOB_CONTENT_WITHIN_APP,
+} from '~/performance_constants';
 
 export default {
   props: {
@@ -31,6 +37,11 @@ export default {
       blobPath: this.fileName,
       blobContent: this.value,
     });
+    window.requestAnimationFrame(() => {
+      performance.mark(SNIPPET_MARK_BLOB_CONTENT);
+      performance.measure(SNIPPET_MEASURE_BLOB_CONTENT);
+      performance.measure(SNIPPET_MEASURE_BLOB_CONTENT_WITHIN_APP, SNIPPET_MARK_EDIT_APP_START);
+    });
   },
   methods: {
     triggerFileChange: debounce(function debouncedFileChange() {

app/assets/javascripts/performance_constants.js

@@ -4,6 +4,7 @@
 
 // marks
 export const SNIPPET_MARK_VIEW_APP_START = 'snippet-view-app-start';
+export const SNIPPET_MARK_EDIT_APP_START = 'snippet-edit-app-start';
 export const SNIPPET_MARK_BLOB_CONTENT = 'snippet-blob-content-finished';
 
 // Measures

app/assets/javascripts/snippets/components/edit.vue

@@ -21,6 +21,7 @@ import {
 import SnippetBlobEdit from './snippet_blob_edit.vue';
 import SnippetVisibilityEdit from './snippet_visibility_edit.vue';
 import SnippetDescriptionEdit from './snippet_description_edit.vue';
+import { SNIPPET_MARK_EDIT_APP_START } from '~/performance_constants';
 
 export default {
   components: {
@@ -106,6 +107,9 @@ export default {
       return `${this.isProjectSnippet ? 'project' : 'personal'}_snippet_description`;
     },
   },
+  beforeCreate() {
+    performance.mark(SNIPPET_MARK_EDIT_APP_START);
+  },
   created() {
     window.addEventListener('beforeunload', this.onBeforeUnload);
   },