chore: try section loader

blocks/fragment/fragment.js

@@ -5,7 +5,7 @@
  */
 
 import { decorateMain } from '../../scripts/scripts.js';
-import { loadBlocks } from '../../scripts/lib-franklin.js';
+import { loadSections } from '../../scripts/lib-franklin.js';
 
 /**
  * Loads a fragment.
@@ -19,7 +19,7 @@ async function loadFragment(path) {
       const main = document.createElement('main');
       main.innerHTML = await resp.text();
       decorateMain(main);
-      await loadBlocks(main);
+      await loadSections(main);
       return main;
     }
   }

blocks/side-navigation/side-navigation.css

@@ -469,14 +469,6 @@
     min-height: 80vh;
   }
 
-  .side-navigation-wrapper + .section.content {
-    display: none;
-  }
-
-  .side-navigation-wrapper.ready + .section.content {
-    display: block;
-  }
-
   .side-navigation-wrapper.expand {
     width: calc(100% - var(--side-navigation-bar-gap));
     display: flex;

scripts/lib-franklin.js

@@ -436,33 +436,6 @@ export function decorateSections(main) {
   });
 }
 
-/**
- * Updates all section status in a container element.
- * @param {Element} main The container element
- */
-export function updateSectionsStatus(main) {
-  // NOTE: added div.section to pick up sections that are listed deep
-  const sections = [
-    ...main.querySelectorAll(':scope > div.section, div.section'),
-  ];
-  for (let i = 0; i < sections.length; i += 1) {
-    const section = sections[i];
-    const status = section.dataset.sectionStatus;
-    if (status !== 'loaded') {
-      const loadingBlock = section.querySelector(
-        '.block[data-block-status="initialized"], .block[data-block-status="loading"]',
-      );
-      if (loadingBlock) {
-        section.dataset.sectionStatus = 'loading';
-        break;
-      } else {
-        section.dataset.sectionStatus = 'loaded';
-        section.style.display = null;
-      }
-    }
-  }
-}
-
 /**
  * Decorates all blocks in a container element.
  * @param {Element} main The container element
@@ -578,16 +551,35 @@ export async function loadBlock(block) {
 }
 
 /**
- * Loads JS and CSS for all blocks in a container element.
- * @param {Element} main The container element
+ * Loads all blocks in a section.
+ * @param {Element} section The section element
  */
-export async function loadBlocks(main) {
-  updateSectionsStatus(main);
-  const blocks = [...main.querySelectorAll('div.block')];
-  for (let i = 0; i < blocks.length; i += 1) {
+
+export async function loadSection(section, loadCallback) {
+  const status = section.dataset.sectionStatus;
+  if (status === 'initialized') {
+    section.dataset.sectionStatus = 'loading';
+    const blocks = [...section.querySelectorAll('div.block')];
+    for (let i = 0; i < blocks.length; i += 1) {
+      // eslint-disable-next-line no-await-in-loop
+      await loadBlock(blocks[i]);
+    }
+    if (loadCallback) await loadCallback(section);
+    section.dataset.sectionStatus = 'loaded';
+    section.style.display = null;
+  }
+}
+
+/**
+ * Loads all sections.
+ * @param {Element} element The parent element of sections to load
+ */
+
+export async function loadSections(element) {
+  const sections = [...element.querySelectorAll('div.section')];
+  for (let i = 0; i < sections.length; i += 1) {
     // eslint-disable-next-line no-await-in-loop
-    await loadBlock(blocks[i]);
-    updateSectionsStatus(main);
+    await loadSection(sections[i]);
   }
 }
 
@@ -735,15 +727,10 @@ export function decorateButtons(element) {
 }
 
 /**
- * Load LCP block and/or wait for LCP in default content.
+ * Wait for Image.
  */
-export async function waitForLCP(lcpBlocks) {
-  const block = document.querySelector('.block');
-  const hasLCPBlock = block && lcpBlocks.includes(block.dataset.blockName);
-  if (hasLCPBlock) await loadBlock(block);
-
-  document.body.style.display = null;
-  const lcpCandidate = document.querySelector('main img');
+export async function waitForFirstImage(section) {
+  const lcpCandidate = section.querySelector('img');
   await new Promise((resolve) => {
     if (lcpCandidate && !lcpCandidate.complete) {
       lcpCandidate.setAttribute('loading', 'eager');

scripts/scripts.js

@@ -7,8 +7,9 @@ import {
   toClassName,
   decorateSections,
   decorateBlocks,
-  waitForLCP,
-  loadBlocks,
+  waitForFirstImage,
+  loadSection,
+  loadSections,
   loadBlock,
   loadCSS,
   loadScript,
@@ -23,8 +24,6 @@ import {
 } from '../utils/helpers.js';
 
 // Constants here
-const LCP_BLOCKS = ['hero', 'logo-wall']; // add your LCP blocks to the list
-
 const AUDIENCES = {
   mobile: () => window.innerWidth < 600,
   desktop: () => window.innerWidth >= 600,
@@ -510,7 +509,6 @@ export function setUpSideNav(main, aside) {
   const sideNav = buildBlock('side-navigation', '');
   aside.append(sideNav);
   main.insertBefore(aside, main.querySelector('.section.content'));
-  updateGuideTemplateStyleBasedOnHero();
   decorateBlock(sideNav);
   return loadBlock(sideNav);
 }
@@ -567,6 +565,8 @@ export function decorateMain(main) {
 function prepareSideNav(main) {
   const aside = createTag('aside');
   main.insertBefore(aside, main.querySelector('.section.content'));
+  aside.classList.add('side-navigation-wrapper');
+  updateGuideTemplateStyleBasedOnHero();
 }
 
 /**
@@ -598,7 +598,8 @@ async function loadEager(doc) {
     decorateBreadcrumb(main);
     prepareSideNav(main);
     document.body.classList.add('appear');
-    await waitForLCP(LCP_BLOCKS);
+    const firstSection = main.querySelector('.section');
+    await loadSection(firstSection, waitForFirstImage);
   }
 }
 
@@ -612,7 +613,7 @@ function setUpSoftNavigation() {
       const template = dom.querySelector('meta[name="template"]');
       if (template && template.getAttribute('content') === 'guides') {
         await decorateMain(main);
-        await loadBlocks(main);
+        await loadSections(main);
         const currentMain = document.querySelector('main');
         const children = [...currentMain.children].slice(2);
         sampleRUM('leave');
@@ -672,7 +673,7 @@ async function loadLazy(doc) {
   // NOTE:'.redesign' class is needed for the redesign styles, keep this
   document.body.classList.add('redesign');
 
-  await loadBlocks(main);
+  await loadSections(main);
   addBlockLevelInViewAnimation(main);
 
   const { hash } = window.location;

styles/styles.css

@@ -2076,4 +2076,10 @@ body.contact-template main .default-content-wrapper img {
     max-width: var(--header-container-width);
     padding: 0 var(--header-container-desktop-x-padding);
   }
+}
+
+@media (min-width: 900px) {
+  aside.side-navigation-wrapper {
+    width: 300px;
+  }
 }

tests/scripts/lib-franklin.test.js

@@ -146,28 +146,14 @@ describe('Sections and blocks', () => {
     expect(document.querySelectorAll('main .block').length).to.equal(7);
   });
 
-  it('Loads blocks', async () => {
+  it('Loads Sections', async () => {
     scripts.init();
-    await scripts.loadBlocks(document.querySelector('main'));
+    await scripts.loadSections(document.querySelector('main'));
     document.querySelectorAll('main .block').forEach(($block) => {
       expect($block.dataset.blockStatus).to.equal('loaded');
     });
   });
 
-  it('Updates section status', async () => {
-    scripts.updateSectionsStatus(document.querySelector('main'));
-    document.querySelectorAll('main .section').forEach(($section) => {
-      expect($section.dataset.sectionStatus).to.equal('loaded');
-    });
-
-    // test section with block still loading
-    const $section = document.querySelector('main .section');
-    delete $section.dataset.sectionStatus;
-    $section.querySelector(':scope .block').dataset.blockStatus = 'loading';
-    scripts.updateSectionsStatus(document.querySelector('main'));
-    expect($section.dataset.sectionStatus).to.equal('loading');
-  });
-
   it('Reads block config', async () => {
     document.querySelector('main .section > div').innerHTML += await readFile({
       path: './config.html',