fix: add a custom event to the nav-priority component to let others know when the component is ready to go (like the nav-indicator); update nav indicator logic to listen for this even before trying to animate if the nav-priority is a nested component AND isn't yet ready to go

Author: bolt-bot

packages/components/bolt-nav-indicator/nav-indicator.js

@@ -84,55 +84,60 @@ let gumshoeStateModule = (function () {
             return;
           }
 
-          // if this there's a <bolt-nav-priority> instance, make sure that component's ready to go before proceeding trying to animate anything.
+          // logic once we know we should try to animate in a gumshoe-activated link
+          function activateGumshoeLink(waitedToAnimate = false) {
 
-          // @todo: iterate on a more refined solution so we animate in ASAP
-          if (nav.nav.closest('bolt-nav-priority')){
-            const priorityNav = nav.nav.closest('bolt-nav-priority');
+            const originalTarget = nav.nav;
+            let originalTargetHref;
+            let normalizedTarget;
 
-            if (!priorityNav.isReady){
-              return;
+            if (originalTarget) {
+              originalTargetHref = originalTarget.getAttribute('href');
+            } else {
+              originalTargetHref = nav.nav.getAttribute('href');
             }
-          }
 
-          const originalTarget = nav.nav;
-          let originalTargetHref;
-          let normalizedTarget;
+            // Need to target via document vs this custom element reference since only one gumshoe instance is shared across every component instance to better optimize for performance
+            const matchedTargetLinks = document.querySelectorAll(`bolt-navlink > [href*="${originalTargetHref}"]`);
 
-          if (originalTarget) {
-            originalTargetHref = originalTarget.getAttribute('href');
-          } else {
-            originalTargetHref = nav.nav.getAttribute('href');
-          }
+            for (var i = 0, len = matchedTargetLinks.length; i < len; i++) {
+              const linkInstance = matchedTargetLinks[i];
+
+              // Stop if normalizedTarget already set.
+              if (normalizedTarget) {
+                break;
+              }
 
-          // Need to target via document vs this custom element reference since only one gumshoe instance is shared across every component instance to better optimize for performance
-          const matchedTargetLinks = document.querySelectorAll(`bolt-navlink > [href*="${originalTargetHref}"]`);
+              // Prefer visible links over hidden links
+              if (isVisible(linkInstance)) {
+                normalizedTarget = linkInstance;
 
-          for (var i = 0, len = matchedTargetLinks.length; i < len; i++) {
-            const linkInstance = matchedTargetLinks[i];
+                // Prefer dropdown links over non-dropdown links if the link is hidden
+              } else if (linkInstance.parentNode.isDropdownLink) {
+                normalizedTarget = linkInstance;
 
-            // Stop if normalizedTarget already set.
-            if (normalizedTarget) {
-              break;
+                // otherwise default to what was originally selected.
+              } else if (i === len - 1) {
+                normalizedTarget = originalTarget;
+              }
             }
 
-            // Prefer visible links over hidden links
-            if (isVisible(linkInstance)) {
-              normalizedTarget = linkInstance;
+            const normalizedParent = normalizedTarget.parentNode;
 
-            // Prefer dropdown links over non-dropdown links if the link is hidden
-            } else if (linkInstance.parentNode.isDropdownLink) {
-              normalizedTarget = linkInstance;
+            normalizedParent.activate();
+          }
 
-            // otherwise default to what was originally selected.
-            } else if (i === len - 1) {
-              normalizedTarget = originalTarget;
+          // if this there's a <bolt-nav-priority> instance, make sure that component's ready to go before proceeding trying to animate anything.
+          if (nav.nav.closest('bolt-nav-priority')){
+            const priorityNav = nav.nav.closest('bolt-nav-priority');
+            if (!priorityNav.isReady){
+              document.addEventListener('nav-priority:ready', activateGumshoeLink(true));
+            } else {
+              activateGumshoeLink();
             }
+          } else {
+            activateGumshoeLink();
           }
-
-          const normalizedParent = normalizedTarget.parentNode;
-
-          normalizedParent.activate();
         },
       });
     }

packages/components/bolt-nav-priority/nav-priority.js

@@ -205,6 +205,15 @@ export class BoltNavPriority extends BoltComponent() {
       this.setAttribute('is-ready', '');
       this.classList.add('is-ready');
 
+      this.dispatchEvent(
+        new CustomEvent('nav-priority:ready', {
+          detail: {
+            isReady: true,
+          },
+          bubbles: true,
+        }),
+      );
+
       // make sure containerTabs exists first
       if (this.containerTabs) {
         this.containerTabs.classList.add('is-ready');