fix: delay load of lottie animations until target route is active

hlxsites · Oct 12, 2023 · cd15b62 · cd15b62
1 parent 9605527
commit cd15b62
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 49 deletions.
diff --git a/blocks/article/article.js b/blocks/article/article.js
@@ -301,7 +301,7 @@ const decorateTitles = (block) => {
     articleTitle.setAttribute('data-docs-heading', true);
 
     articleTitle.innerHTML = `
-          <div class="anchor" style="height: 50px"></div>
+          <div class="anchor"></div>
           ${title}
           <button class="button-copy button-copy-link">
             <span>

diff --git a/blocks/category/category.js b/blocks/category/category.js
@@ -259,7 +259,7 @@ async function renderContent(block) {
 
   // Get current hash, render that view
   const { hash } = window.location;
-  showRoute(hash);
+  showRoute(hash, `#${categoryRouteId}`);
 }
 
 /**

diff --git a/blocks/intro/intro.css b/blocks/intro/intro.css
@@ -35,7 +35,7 @@
 }
 
 .header-section > p:first-child:before {
-  background: url('/prisma/prisma-cloud/assets/cloud-logo.png') 0 0 no-repeat;
+  background: url('/assets/cloud-logo.png') 0 0 no-repeat;
   background-size: contain;
   content: '';
   display: inline-flex;
@@ -380,17 +380,17 @@
   }
 
   .ops-nav-item:first-child:before {
-    background: url('/prisma/prisma-cloud/assets/ops-infrastructure.png') 0 0 no-repeat;
+    background: url('/assets/ops-infrastructure.png') 0 0 no-repeat;
     background-size: contain;
   }
 
   .ops-nav-item:nth-child(2):before {
-    background: url('/prisma/prisma-cloud/assets/ops-code.png') 0 0 no-repeat;
+    background: url('/assets/ops-code.png') 0 0 no-repeat;
     background-size: contain;
   }
 
   .ops-nav-item:nth-child(3):before {
-    background: url('/prisma/prisma-cloud/assets/ops-runtime.png') 0 0 no-repeat;
+    background: url('/assets/ops-runtime.png') 0 0 no-repeat;
     background-size: contain;
   }
 

diff --git a/icons/Cloud Logo 2 (2).svg b/icons/Cloud Logo 2 (2).svg
diff --git a/scripts/scripts.js b/scripts/scripts.js
@@ -1133,14 +1133,14 @@ export const fadeIn = (element, targetClass = 'is-current-route') => {
   }, 100);
 };
 
-// Lottie animations for each categoiry
-const LOTTIE_PATHS = {
-  'secure-the-source': `${window.hlx.codeBasePath}/assets/lottie-code.json`,
-  'secure-the-infrastructure': `${window.hlx.codeBasePath}/assets/lottie-infrastructure.json`,
-  'secure-the-runtime': `${window.hlx.codeBasePath}/assets/lottie-runtime.json`,
-};
+export const showRoute = (hash, targetCategoryId) => {
+  // Lottie animations for each categoiry
+  const LOTTIE_PATHS = {
+    'secure-the-source': `${window.hlx.codeBasePath}/assets/lottie-code.json`,
+    'secure-the-infrastructure': `${window.hlx.codeBasePath}/assets/lottie-infrastructure.json`,
+    'secure-the-runtime': `${window.hlx.codeBasePath}/assets/lottie-runtime.json`,
+  };
 
-export const showRoute = (hash) => {
   let targetCategory = null;
   if (!hash) {
     // Show intro
@@ -1180,9 +1180,9 @@ export const showRoute = (hash) => {
         targetButton.classList.add('is-active');
       }
     }
-
+    const targetCategoryHash = targetCategoryId || hash;
     // Play animation
-    if (targetCategory) {
+    if (targetCategory && targetCategoryHash === targetCategory.getAttribute('data-route')) {
       loadLottie();
       const player = targetCategory.querySelector('lottie-player');
       if (!player.classList.contains('has-loaded')) {