adobecom · milo-pr-merge · Jul 5, 2025 · Jun 16, 2025 · Jun 16, 2025 · Jun 16, 2025
@@ -46,6 +46,12 @@
 
   /* App banner */
   --app-banner-height: 76px;
+
+  /* Skeleton loading state */
+  --feds-skeleton-color-1: #D3D3D3;
+  --feds-skeleton-color-2: #EAEAEA;
+  --feds-skeleton-color-3: #D3D3D3;
+  --feds-skeleton-opacity: 0.7;
 }
 
 /* Nav Link styles */

@@ -44,6 +44,12 @@
   /* mobile gnav redesign */
   --feds-borderColor-link-v2: #323232;
   --feds-borderColor-localnav-v2: #323232;
+
+  /* Skeleton loading state - dark theme */
+  --feds-skeleton-color-1: #2c2c2c;
+  --feds-skeleton-color-2: #3a3a3a;
+  --feds-skeleton-color-3: #2c2c2c;
+  --feds-skeleton-opacity: 0.5;
 }
 
 .feds--dark .feds-navLink--hoverCaret:hover,

@@ -1465,8 +1465,8 @@ header.new-nav .feds-nav > section.feds-navItem > .feds-popup.loading .feds-navL
 header.new-nav .feds-nav > section.feds-navItem > .feds-popup.loading .feds-navLink-content .feds-navLink-description, 
 header.new-nav .feds-nav > section.feds-navItem > .feds-popup.loading .tabs button > div {
   border-radius: 2px;
-  opacity: 0.7;
-  background: linear-gradient(270deg, #D3D3D3, #EAEAEA, #D3D3D3);
+  opacity: var(--feds-skeleton-opacity);
+  background: linear-gradient(270deg, var(--feds-skeleton-color-1), var(--feds-skeleton-color-2), var(--feds-skeleton-color-3));
   background-size: 200% 200%;
   animation: mega-menu-skeleton 0.6s infinite alternate linear;
   animation-direction: alternate;

@@ -1390,34 +1390,36 @@ class Gnav {
         clearTimeout(decorationTimeout);
 
         const loadingDesktopMegaMenuHTML = template.querySelector('.feds-popup.loading')?.innerHTML;
-        const menuLogic = await loadDecorateMenu();
-
-        menuLogic.decorateMenu({
-          item,
-          template,
-          type: itemType,
-        }).then(async () => {
-          // There are two calls to transformTemplateToMobile
-          // One without awaiting decorateMenu, and one after
-          // decorateMenu is complete
-          const popup = template.querySelector('.feds-popup');
-          desktopMegaMenuHTML = popup.innerHTML;
-          if (!this.newMobileNav) return;
-          if (isDesktop.matches || !popup) return;
-          mobileNavCleanup();
-          mobileNavCleanup = await transformTemplateToMobile({
-            popup,
-            item,
-            localnav: this.isLocalNav(),
-            toggleMenu: this.toggleMenuMobile,
-          });
-          if (popup.closest('section.feds-dropdown--active')) makeTabActive(popup);
-        }).finally(() => {
-          if (this.isLocalNav()) {
-            decorateLocalNavItems(item, template);
-          }
-        });
+        (async () => {
+          try {
+            const menuLogic = await loadDecorateMenu();
 
+            await menuLogic.decorateMenu({
+              item,
+              template,
+              type: itemType,
+            });
+            // There are two calls to transformTemplateToMobile
+            // One without awaiting decorateMenu, and one after
+            // decorateMenu is complete
+            const popup = template.querySelector('.feds-popup');
+            desktopMegaMenuHTML = popup.innerHTML;
+            if (!this.newMobileNav) return;
+            if (isDesktop.matches || !popup) return;
+            mobileNavCleanup();
+            mobileNavCleanup = await transformTemplateToMobile({
+              popup,
+              item,
+              localnav: this.isLocalNav(),
+              toggleMenu: this.toggleMenuMobile,
+            });
+            if (popup.closest('section.feds-dropdown--active')) makeTabActive(popup);
+          } finally {
+            if (this.isLocalNav()) {
+              decorateLocalNavItems(item, template);
+            }
+          }
+        })();
         if (this.newMobileNav) {
           const popup = template.querySelector('.feds-popup');
           if (!isDesktop.matches && popup) {
@@ -1644,12 +1646,12 @@ export default async function init(block) {
     newMobileNav,
   });
   if (newMobileNav && !isDesktop.matches) block.classList.add('new-nav');
+  if (isDarkMode()) block.classList.add('feds--dark');
   await gnav.init();
   if (gnav.isLocalNav()) block.classList.add('local-nav');
   block.setAttribute('daa-im', 'true');
   const mepMartech = mep?.martech || '';
   block.setAttribute('daa-lh', `gnav|${getExperienceName()}${mepMartech}`);
-  if (isDarkMode()) block.classList.add('feds--dark');
   performance.mark('Gnav-Init-End');
   logPerformance('Gnav-Init-Function-Time', 'Gnav-Start', 'Gnav-Init-End');
   return gnav;

@@ -567,10 +567,11 @@ export const transformTemplateToMobile = async ({ popup, item, localnav = false,
   const notMegaMenu = popup.parentElement.tagName === 'DIV';
   if (notMegaMenu) return () => {};
 
+  const isLoading = popup.classList.contains('loading');
   const tabs = [...popup.querySelectorAll('.feds-menu-section')]
     .filter((section) => !section.querySelector('.feds-promo') && section.textContent)
     .map(parseTabsFromMenuSection)
-    .concat(await promoCrossCloudTab(popup));
+    .concat(isLoading ? [] : await promoCrossCloudTab(popup));
 
   const CTA = popup.querySelector('.feds-cta--primary')?.outerHTML ?? '';
   const mainMenu = `