@faststore/core 3.0.137 → 3.0.140

package/.turbo/turbo-build.log

@@ -74,4 +74,4 @@ Route (pages)                              Size     First Load JS
 ○  (Static)  automatically rendered as static HTML (uses no initial props)
 ●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
 
-Done in 73.66s.
+Done in 72.00s.

package/.turbo/turbo-lint.log

@@ -1,4 +1,4 @@
 yarn run v1.22.22
 $ next lint
 ✔ No ESLint warnings or errors
-Done in 6.25s.
+Done in 5.89s.

package/.turbo/turbo-test.log

@@ -1,12 +1,12 @@
 yarn run v1.22.22
 $ jest
-PASS test/utils/multipleTemplates.test.ts (34.663 s)
-PASS test/server/cms/index.test.ts (35.118 s)
-PASS test/server/index.test.ts (38.936 s)
+PASS test/server/cms/index.test.ts (34.914 s)
+PASS test/utils/multipleTemplates.test.ts (35.634 s)
+PASS test/server/index.test.ts (38.535 s)
 
 Test Suites: 3 passed, 3 total
 Tests:       19 passed, 19 total
 Snapshots:   0 total
-Time:        40.148 s
+Time:        39.603 s
 Ran all test suites.
-Done in 42.20s.
+Done in 41.17s.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "3.0.137",
+  "version": "3.0.140",
   "license": "MIT",
   "repository": "vtex/faststore",
   "browserslist": "supports es6-module and not dead",
@@ -43,7 +43,7 @@
     "@envelop/graphql-jit": "^8.0.3",
     "@envelop/parser-cache": "^6.0.2",
     "@envelop/validation-cache": "^6.0.2",
-    "@faststore/api": "^3.0.135",
+    "@faststore/api": "^3.0.140",
     "@faststore/components": "^3.0.135",
     "@faststore/graphql-utils": "^3.0.135",
     "@faststore/lighthouse": "^3.0.135",
@@ -128,5 +128,5 @@
     "node": "18.19.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "180d1b1e75b27d193341288397f795088f12bd8d"
+  "gitHead": "5d08521fda57ec355d8a9943235c7f4e7121ed24"
 }

package/src/components/cms/RenderSections.tsx

@@ -1,13 +1,24 @@
-import { ComponentType, PropsWithChildren, memo, useMemo } from 'react'
+import {
+  ComponentType,
+  PropsWithChildren,
+  ReactNode,
+  memo,
+  useMemo,
+} from 'react'
 
-import SectionBoundary from './SectionBoundary'
 import { Section } from '@vtex/client-cms'
+import SectionBoundary from './SectionBoundary'
+import ViewportObserver from './ViewportObserver'
+
+import { useUI } from '@faststore/ui'
 
 interface Props {
   components: Record<string, ComponentType<any>>
   sections: Array<{ name: string; data: any }>
 }
 
+const SECTIONS_OUT_OF_VIEWPORT = ['CartSidebar', 'RegionModal']
+
 const useDividedSections = (sections: Section[]) => {
   return useMemo(() => {
     const indexChildren = sections.findIndex(({ name }) => name === 'Children')
@@ -21,6 +32,39 @@ const useDividedSections = (sections: Section[]) => {
   }, [sections])
 }
 
+/**
+ * This component is 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.
+ *
+ * @param sectionName
+ * @returns
+ */
+export const LazyLoadingSection = ({
+  sectionName,
+  children,
+}: {
+  sectionName: string
+  children: ReactNode
+}) => {
+  const { cart: displayCart, modal: displayModal } = useUI()
+
+  if (SECTIONS_OUT_OF_VIEWPORT.includes(sectionName)) {
+    const shouldLoad =
+      (sectionName === 'CartSidebar' && displayCart) ||
+      (sectionName === 'RegionModal' && displayModal)
+    if (!shouldLoad) {
+      return null
+    }
+
+    return children
+  }
+  return (
+    <ViewportObserver sectionName={sectionName}>{children}</ViewportObserver>
+  )
+}
+
 const RenderSectionsBase = ({ sections = [], components }: Props) => {
   return (
     <>
@@ -37,7 +81,7 @@ const RenderSectionsBase = ({ sections = [], components }: Props) => {
         }
 
         return (
-          <SectionBoundary key={`cms-section-${index}`} name={name}>
+          <SectionBoundary key={`cms-section-${name}-${index}`} name={name}>
             <Component {...data} />
           </SectionBoundary>
         )

package/src/components/sections/Hero/Hero.tsx

@@ -60,6 +60,7 @@ const Hero = ({
             width={360}
             height={240}
             sizes="(max-width: 412px) 40vw, (max-width: 768px) 90vw, 50vw"
+            priority={true}
           />
         </HeroImage.Component>
         <HeroHeader.Component