Feat: adds LazyLoadingSection component - perf

[hellofanny]

What's the purpose of this pull request?

Adds LazyLoadingSection component, it will be responsible for lazy loading Sections that are out of the viewport.

• It achieves this by:
• 1. Using the IntersectionObserver API for Sections below the fold.
• 2. Checking the UI context for Sections that are not in the viewport, such as the CartSidebar and RegionModal.

We will be implementing this in the RenderSectionsBase as part of our upcoming tasks. This component is not being applied in isolation due to concerns about increased Cumulative Layout Shift (CLS).

How to test it?

1. You can use this preview link, where the LazyLoadingSection is temporary applied or locally add it in RenderSectionsBase component.

 <SectionBoundary key={`cms-section-${name}-${index}`} name={name}>
      <LazyLoadingSection sectionName={name}>
           <Component {...data} />
      </LazyLoadingSection>
 </SectionBoundary>

2. Inspect the code, use the React extension for this test:
   • search for Footer, you won't find it until you scroll the page until the Newsletter section

test-lazyloadingsection.mov

Starters Deploy Preview

vtex-sites/starter.store#586

References

#2404

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
faststore-site	⬜️ Ignored (Inspect)	Visit Preview		Oct 24, 2024 7:33pm

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[pedromtec]

Do you test the web vitals score?

[hellofanny]

Do you test the web vitals score?

Yes, locally. But since I'm not using this component yet, it shouldn't make any changes. I found that we introduced CLS with the recent changes, but I will address that in another PR.