Optimization of setup of Main Nav Layout, Contextual Sidebar and Fly Out Nav

1 files changed, 35 insertions, 30 deletions

diff --git a/app/assets/javascripts/layout_nav.js b/app/assets/javascripts/layout_nav.js
index b8c3c237eb3..4314e5e1afb 100644
--- a/app/assets/javascripts/layout_nav.js
+++ b/app/assets/javascripts/layout_nav.js
@@ -11,48 +11,53 @@ function hideEndFade($scrollingTabs) {
   });
 }
 
+function initDeferred() {
+  $(document).trigger('init.scrolling-tabs');
+}
+
 export default function initLayoutNav() {
   const contextualSidebar = new ContextualSidebar();
   contextualSidebar.bindEvents();
 
   initFlyOutNav();
 
-  $(document)
-    .on('init.scrolling-tabs', () => {
-      const $scrollingTabs = $('.scrolling-tabs').not('.is-initialized');
-      $scrollingTabs.addClass('is-initialized');
+  // We need to init it on DomContentLoaded as others could also call it
+  $(document).on('init.scrolling-tabs', () => {
+    const $scrollingTabs = $('.scrolling-tabs').not('.is-initialized');
+    $scrollingTabs.addClass('is-initialized');
 
-      $(window)
-        .on('resize.nav', () => {
-          hideEndFade($scrollingTabs);
-        })
-        .trigger('resize.nav');
+    $(window)
+      .on('resize.nav', () => {
+        hideEndFade($scrollingTabs);
+      })
+      .trigger('resize.nav');
 
-      $scrollingTabs.on('scroll', function tabsScrollEvent() {
-        const $this = $(this);
-        const currentPosition = $this.scrollLeft();
-        const maxPosition = $this.prop('scrollWidth') - $this.outerWidth();
+    $scrollingTabs.on('scroll', function tabsScrollEvent() {
+      const $this = $(this);
+      const currentPosition = $this.scrollLeft();
+      const maxPosition = $this.prop('scrollWidth') - $this.outerWidth();
 
-        $this.siblings('.fade-left').toggleClass('scrolling', currentPosition > 0);
-        $this.siblings('.fade-right').toggleClass('scrolling', currentPosition < maxPosition - 1);
-      });
+      $this.siblings('.fade-left').toggleClass('scrolling', currentPosition > 0);
+      $this.siblings('.fade-right').toggleClass('scrolling', currentPosition < maxPosition - 1);
+    });
 
-      $scrollingTabs.each(function scrollTabsEachLoop() {
-        const $this = $(this);
-        const scrollingTabWidth = $this.width();
-        const $active = $this.find('.active');
-        const activeWidth = $active.width();
+    $scrollingTabs.each(function scrollTabsEachLoop() {
+      const $this = $(this);
+      const scrollingTabWidth = $this.width();
+      const $active = $this.find('.active');
+      const activeWidth = $active.width();
 
-        if ($active.length) {
-          const offset = $active.offset().left + activeWidth;
+      if ($active.length) {
+        const offset = $active.offset().left + activeWidth;
 
-          if (offset > scrollingTabWidth - 30) {
-            const scrollLeft = offset - scrollingTabWidth / 2 - activeWidth / 2;
+        if (offset > scrollingTabWidth - 30) {
+          const scrollLeft = offset - scrollingTabWidth / 2 - activeWidth / 2;
 
-            $this.scrollLeft(scrollLeft);
-          }
+          $this.scrollLeft(scrollLeft);
         }
-      });
-    })
-    .trigger('init.scrolling-tabs');
+      }
+    });
+  });
+
+  requestIdleCallback(initDeferred);
 }