1 files changed, 17 insertions, 2 deletions
diff --git a/app/assets/javascripts/performance_bar/index.js b/app/assets/javascripts/performance_bar/index.js
index f29b5f42d8f..e0b7f2190ca 100644
--- a/app/assets/javascripts/performance_bar/index.js
+++ b/app/assets/javascripts/performance_bar/index.js
@@ -1,5 +1,6 @@
 /* eslint-disable @gitlab/require-i18n-strings */
 import Vue from 'vue';
+import Translate from '~/vue_shared/translate';
 import axios from '~/lib/utils/axios_utils';
 
 import PerformanceBarService from './services/performance_bar_service';
@@ -7,6 +8,8 @@ import PerformanceBarStore from './stores/performance_bar_store';
 
 import initPerformanceBarLog from './performance_bar_log';
 
+Vue.use(Translate);
+
 const initPerformanceBar = el => {
   const performanceBarData = el.dataset;
 
@@ -123,11 +126,23 @@ const initPerformanceBar = el => {
   });
 };
 
-document.addEventListener('DOMContentLoaded', () => {
+let loadedPeekBar = false;
+function loadBar() {
   const jsPeek = document.querySelector('#js-peek');
-  if (jsPeek) {
+  if (!loadedPeekBar && jsPeek) {
+    loadedPeekBar = true;
     initPerformanceBar(jsPeek);
   }
+}
+
+// If js-peek is not loaded when this script is executed, this call will do nothing
+// If this is the case, then it will loadBar on DOMContentLoaded. We would prefer it
+// to be initialized before the DOMContetLoaded event in order to pick up all the
+// requests sent from the page.
+loadBar();
+
+document.addEventListener('DOMContentLoaded', () => {
+  loadBar();
 });
 
 initPerformanceBarLog();