Fire performance measurement at max 1 time

Weh non the multi-file snippet, we want to watch only for the
very first blob to be rendered. That should be enough for the
measurements.

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

@@ -2,10 +2,10 @@
 import { initEditorLite } from '~/blob/utils';
 import { debounce } from 'lodash';
 import {
-  SNIPPET_MARK_BLOB_CONTENT,
+  SNIPPET_MARK_BLOBS_CONTENT,
   SNIPPET_MARK_EDIT_APP_START,
-  SNIPPET_MEASURE_BLOB_CONTENT,
-  SNIPPET_MEASURE_BLOB_CONTENT_WITHIN_APP,
+  SNIPPET_MEASURE_BLOBS_CONTENT,
+  SNIPPET_MEASURE_BLOBS_CONTENT_WITHIN_APP,
 } from '~/performance_constants';
 
 export default {
@@ -38,9 +38,11 @@ export default {
       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);
+      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: {

app/assets/javascripts/performance_constants.js

@@ -5,8 +5,8 @@
 // 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';
+export const SNIPPET_MARK_BLOBS_CONTENT = 'snippet-blobs-content-finished';
 
 // Measures
-export const SNIPPET_MEASURE_BLOB_CONTENT = 'snippet-blob-content';
-export const SNIPPET_MEASURE_BLOB_CONTENT_WITHIN_APP = 'snippet-blob-content-within-app';
+export const SNIPPET_MEASURE_BLOBS_CONTENT = 'snippet-blobs-content';
+export const SNIPPET_MEASURE_BLOBS_CONTENT_WITHIN_APP = 'snippet-blobs-content-within-app';

app/assets/javascripts/vue_shared/components/blob_viewers/mixins.js

 import {
   SNIPPET_MARK_VIEW_APP_START,
-  SNIPPET_MARK_BLOB_CONTENT,
-  SNIPPET_MEASURE_BLOB_CONTENT,
-  SNIPPET_MEASURE_BLOB_CONTENT_WITHIN_APP,
+  SNIPPET_MARK_BLOBS_CONTENT,
+  SNIPPET_MEASURE_BLOBS_CONTENT,
+  SNIPPET_MEASURE_BLOBS_CONTENT_WITHIN_APP,
 } from '~/performance_constants';
 
 export default {
@@ -18,9 +18,11 @@ export default {
   },
   mounted() {
     window.requestAnimationFrame(() => {
-      performance.mark(SNIPPET_MARK_BLOB_CONTENT);
-      performance.measure(SNIPPET_MEASURE_BLOB_CONTENT);
-      performance.measure(SNIPPET_MEASURE_BLOB_CONTENT_WITHIN_APP, SNIPPET_MARK_VIEW_APP_START);
+      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_VIEW_APP_START);
+      }
     });
   }
 };