1 files changed, 26 insertions, 15 deletions
diff --git a/app/assets/javascripts/performance_bar/index.js b/app/assets/javascripts/performance_bar/index.js
index eb5b50dd1ec..e7f84eacdca 100644
--- a/app/assets/javascripts/performance_bar/index.js
+++ b/app/assets/javascripts/performance_bar/index.js
@@ -1,5 +1,6 @@
 import '../webpack';
 
+import { isEmpty } from 'lodash';
 import Vue from 'vue';
 import axios from '~/lib/utils/axios_utils';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
@@ -37,9 +38,10 @@ const initPerformanceBar = (el) => {
       };
     },
     mounted() {
-      PerformanceBarService.registerInterceptor(this.peekUrl, this.loadRequestDetails);
+      PerformanceBarService.registerInterceptor(this.peekUrl, this.addRequest);
 
-      this.loadRequestDetails(this.requestId, window.location.href);
+      this.addRequest(this.requestId, window.location.href);
+      this.loadRequestDetails(this.requestId);
     },
     beforeDestroy() {
       PerformanceBarService.removeInterceptor();
@@ -51,26 +53,32 @@ const initPerformanceBar = (el) => {
           // want to trace the request.
           axios.get(urlOrRequestId);
         } else {
-          this.loadRequestDetails(urlOrRequestId, urlOrRequestId);
+          this.addRequest(urlOrRequestId, urlOrRequestId);
         }
       },
-      loadRequestDetails(requestId, requestUrl) {
+      addRequest(requestId, requestUrl) {
         if (!this.store.canTrackRequest(requestUrl)) {
           return;
         }
 
         this.store.addRequest(requestId, requestUrl);
+      },
+      loadRequestDetails(requestId) {
+        const request = this.store.findRequest(requestId);
+
+        if (request && isEmpty(request.details)) {
+          return PerformanceBarService.fetchRequestDetails(this.peekUrl, requestId)
+            .then((res) => {
+              this.store.addRequestDetails(requestId, res.data);
+              if (this.requestId === requestId) this.collectFrontendPerformanceMetrics();
+            })
+            .catch(() =>
+              // eslint-disable-next-line no-console
+              console.warn(`Error getting performance bar results for ${requestId}`),
+            );
+        }
 
-        PerformanceBarService.fetchRequestDetails(this.peekUrl, requestId)
-          .then((res) => {
-            this.store.addRequestDetails(requestId, res.data);
-
-            if (this.requestId === requestId) this.collectFrontendPerformanceMetrics();
-          })
-          .catch(() =>
-            // eslint-disable-next-line no-console
-            console.warn(`Error getting performance bar results for ${requestId}`),
-          );
+        return Promise.resolve();
       },
       collectFrontendPerformanceMetrics() {
         if (performance) {
@@ -82,7 +90,9 @@ const initPerformanceBar = (el) => {
           let summary = {};
           if (navigationEntries.length > 0) {
             const backend = Math.round(navigationEntries[0].responseEnd);
-            const firstContentfulPaint = Math.round(paintEntries[1].startTime);
+            const firstContentfulPaint = Math.round(
+              paintEntries.find((entry) => entry.name === 'first-contentful-paint')?.startTime,
+            );
             const domContentLoaded = Math.round(navigationEntries[0].domContentLoadedEventEnd);
 
             summary = {
@@ -141,6 +151,7 @@ const initPerformanceBar = (el) => {
         },
         on: {
           'add-request': this.addRequestManually,
+          'change-request': this.loadRequestDetails,
         },
       });
     },