Add latest changes from gitlab-org/gitlab@master

2 files changed, 25 insertions, 1 deletions

diff --git a/app/assets/javascripts/design_management/components/image.vue b/app/assets/javascripts/design_management/components/image.vue
index e64ee4a5a34..8ab94cd2c4b 100644
--- a/app/assets/javascripts/design_management/components/image.vue
+++ b/app/assets/javascripts/design_management/components/image.vue
@@ -1,6 +1,8 @@
 <script>
 import { GlIcon } from '@gitlab/ui';
 import { throttle } from 'lodash';
+import { DESIGN_MARK_APP_START, DESIGN_MAIN_IMAGE_OUTPUT } from '~/performance/constants';
+import { performanceMarkAndMeasure } from '~/performance/utils';
 
 export default {
   components: {
@@ -39,7 +41,9 @@ export default {
     window.removeEventListener('resize', this.resizeThrottled, false);
   },
   mounted() {
-    this.onImgLoad();
+    if (!this.image) {
+      this.onImgLoad();
+    }
 
     this.resizeThrottled = throttle(() => {
       // NOTE: if imageStyle is set, then baseImageSize
@@ -53,6 +57,14 @@ export default {
   methods: {
     onImgLoad() {
       requestIdleCallback(this.setBaseImageSize, { timeout: 1000 });
+      performanceMarkAndMeasure({
+        measures: [
+          {
+            name: DESIGN_MAIN_IMAGE_OUTPUT,
+            start: DESIGN_MARK_APP_START,
+          },
+        ],
+      });
     },
     onImgError() {
       this.imageError = true;
diff --git a/app/assets/javascripts/design_management/index.js b/app/assets/javascripts/design_management/index.js
index aa9f377ef16..11666587265 100644
--- a/app/assets/javascripts/design_management/index.js
+++ b/app/assets/javascripts/design_management/index.js
@@ -1,4 +1,6 @@
 import Vue from 'vue';
+import { DESIGN_MARK_APP_START, DESIGN_MEASURE_BEFORE_APP } from '~/performance/constants';
+import { performanceMarkAndMeasure } from '~/performance/utils';
 import App from './components/app.vue';
 import apolloProvider from './graphql';
 import activeDiscussionQuery from './graphql/queries/active_discussion.query.graphql';
@@ -28,6 +30,16 @@ export default () => {
       projectPath,
       issueIid,
     },
+    mounted() {
+      performanceMarkAndMeasure({
+        mark: DESIGN_MARK_APP_START,
+        measures: [
+          {
+            name: DESIGN_MEASURE_BEFORE_APP,
+          },
+        ],
+      });
+    },
     render(createElement) {
       return createElement(App);
     },