Merge branch 'tz-improve-mainjs' into 'master'

Improve JS Initialisation that we do on each page

See merge request gitlab-org/gitlab-ce!24190

2 files changed, 55 insertions, 43 deletions

diff --git a/app/assets/javascripts/header.js b/app/assets/javascripts/header.js
index 2fa7a219ea8..3d846310008 100644
--- a/app/assets/javascripts/header.js
+++ b/app/assets/javascripts/header.js
@@ -23,7 +23,7 @@ export default function initTodoToggle() {
   });
 }
 
-document.addEventListener('DOMContentLoaded', () => {
+function initStatusTriggers() {
   const setStatusModalTriggerEl = document.querySelector('.js-set-status-modal-trigger');
   const setStatusModalWrapperEl = document.querySelector('.js-set-status-modal-wrapper');
 
@@ -72,4 +72,8 @@ document.addEventListener('DOMContentLoaded', () => {
       },
     });
   }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  requestIdleCallback(initStatusTriggers);
 });
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index c866e8d180a..4ba3543f9b2 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -66,15 +66,11 @@ gl.lazyLoader = new LazyLoader({
   observerNode: '#content-body',
 });
 
-document.addEventListener('DOMContentLoaded', () => {
+// Put all initialisations here that can also wait after everything is rendered and ready
+function deferredInitialisation() {
   const $body = $('body');
-  const $document = $(document);
-  const $window = $(window);
-  const $sidebarGutterToggle = $('.js-sidebar-toggle');
-  let bootstrapBreakpoint = bp.getBreakpointSize();
 
   initBreadcrumbs();
-  initLayoutNav();
   initImporterStatus();
   initTodoToggle();
   initLogoAnimation();
@@ -84,34 +80,6 @@ document.addEventListener('DOMContentLoaded', () => {
   if (document.querySelector('.search')) initSearchAutocomplete();
   if (document.querySelector('#js-peek')) initPerformanceBar({ container: '#js-peek' });
 
-  // Set the default path for all cookies to GitLab's root directory
-  Cookies.defaults.path = gon.relative_url_root || '/';
-
-  // `hashchange` is not triggered when link target is already in window.location
-  $body.on('click', 'a[href^="#"]', function clickHashLinkCallback() {
-    const href = this.getAttribute('href');
-    if (href.substr(1) === getLocationHash()) {
-      setTimeout(handleLocationHash, 1);
-    }
-  });
-
-  if (bootstrapBreakpoint === 'xs') {
-    const $rightSidebar = $('aside.right-sidebar, .layout-page');
-
-    $rightSidebar.removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed');
-  }
-
-  // prevent default action for disabled buttons
-  $('.btn').click(function clickDisabledButtonCallback(e) {
-    if ($(this).hasClass('disabled')) {
-      e.preventDefault();
-      e.stopImmediatePropagation();
-      return false;
-    }
-
-    return true;
-  });
-
   addSelectOnFocusBehaviour('.js-select-on-focus');
 
   $('.remove-row').on('ajax:success', function removeRowAjaxSuccessCallback() {
@@ -164,6 +132,48 @@ document.addEventListener('DOMContentLoaded', () => {
     viewport: '.layout-page',
   });
 
+  loadAwardsHandler();
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  const $body = $('body');
+  const $document = $(document);
+  const $window = $(window);
+  const $sidebarGutterToggle = $('.js-sidebar-toggle');
+  let bootstrapBreakpoint = bp.getBreakpointSize();
+
+  initLayoutNav();
+
+  // Set the default path for all cookies to GitLab's root directory
+  Cookies.defaults.path = gon.relative_url_root || '/';
+
+  // `hashchange` is not triggered when link target is already in window.location
+  $body.on('click', 'a[href^="#"]', function clickHashLinkCallback() {
+    const href = this.getAttribute('href');
+    if (href.substr(1) === getLocationHash()) {
+      setTimeout(handleLocationHash, 1);
+    }
+  });
+
+  if (bootstrapBreakpoint === 'xs') {
+    const $rightSidebar = $('aside.right-sidebar, .layout-page');
+
+    $rightSidebar.removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed');
+  }
+
+  // prevent default action for disabled buttons
+  $('.btn').click(function clickDisabledButtonCallback(e) {
+    if ($(this).hasClass('disabled')) {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      return false;
+    }
+
+    return true;
+  });
+
+  localTimeAgo($('abbr.timeago, .js-timeago'), true);
+
   // Form submitter
   $('.trigger-submit').on('change', function triggerSubmitCallback() {
     $(this)
@@ -171,8 +181,6 @@ document.addEventListener('DOMContentLoaded', () => {
       .submit();
   });
 
-  localTimeAgo($('abbr.timeago, .js-timeago'), true);
-
   // Disable form buttons while a form is submitting
   $body.on('ajax:complete, ajax:beforeSend, submit', 'form', function ajaxCompleteCallback(e) {
     const $buttons = $('[type="submit"], .js-disable-on-submit', this);
@@ -195,6 +203,10 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   });
 
+  $('.navbar-toggler').on('click', () => {
+    $('.header-content').toggleClass('menu-expanded');
+  });
+
   // Commit show suppressed diff
   $document.on('click', '.diff-content .js-show-suppressed-diff', function showDiffCallback() {
     const $container = $(this).parent();
@@ -202,10 +214,6 @@ document.addEventListener('DOMContentLoaded', () => {
     $container.remove();
   });
 
-  $('.navbar-toggler').on('click', () => {
-    $('.header-content').toggleClass('menu-expanded');
-  });
-
   // Show/hide comments on diff
   $body.on('click', '.js-toggle-diff-comments', function toggleDiffCommentsCallback(e) {
     const $this = $(this);
@@ -250,8 +258,6 @@ document.addEventListener('DOMContentLoaded', () => {
 
   $window.on('resize.app', fitSidebarForSize);
 
-  loadAwardsHandler();
-
   $('form.filter-form').on('submit', function filterFormSubmitCallback(event) {
     const link = document.createElement('a');
     link.href = this.action;
@@ -274,4 +280,6 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // initialize field errors
   $('.gl-show-field-errors').each((i, form) => new GlFieldErrors(form));
+
+  requestIdleCallback(deferredInitialisation);
 });