Start performance bar eagerly

On the issues page (for instance), we have an `Issue` class. The constructor for
that class makes some calls to get things like related branches using Axios.
However, those calls were happening before the performance bar app was mounted,
and so the interceptor wasn't configured - meaning we missed out on the
performance data for those calls.

This changes the performance bar app to be loaded eagerly instead of lazily,
which solves that problem - related branches calls will now show up in the
performance bar.

The downside is that now the performance bar app is always imported, even when
it's not used. However, it appears to be part of the main app bundle anyway, so
this shouldn't affect the size of our assets.

1 files changed, 2 insertions, 4 deletions

diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index b755458aa4b..a5af37e80b6 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -1,12 +1,12 @@
 /* eslint-disable consistent-return, no-new */
 
 import $ from 'jquery';
-import Flash from './flash';
 import GfmAutoComplete from './gfm_auto_complete';
 import { convertPermissionToBoolean } from './lib/utils/common_utils';
 import GlFieldErrors from './gl_field_errors';
 import Shortcuts from './shortcuts';
 import SearchAutocomplete from './search_autocomplete';
+import performanceBar from './performance_bar';
 
 function initSearch() {
   // Only when search form is present
@@ -72,9 +72,7 @@ function initGFMInput() {
 
 function initPerformanceBar() {
   if (document.querySelector('#js-peek')) {
-    import('./performance_bar')
-      .then(m => new m.default({ container: '#js-peek' })) // eslint-disable-line new-cap
-      .catch(() => Flash('Error loading performance bar module'));
+    performanceBar({ container: '#js-peek' });
   }
 }