chore: Performance improvements by sections

CHANGELOG.md

@@ -8,7 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 ### Added
-
+- Sections component with `content-visibility: auto`
 - Webpack Bundle analyzer
 - `GatsbyLink` to `Link` ui component.
 - `Skeleton` loading components.

src/components/sections/Section/Section.tsx

@@ -0,0 +1,14 @@
+import './section.scss'
+
+import React from 'react'
+import type { PropsWithChildren } from 'react'
+
+interface Props {
+  className?: string
+}
+
+function Section({ children, className = '' }: PropsWithChildren<Props>) {
+  return <section className={`section ${className}`}>{children}</section>
+}
+
+export default Section

src/components/sections/Section/index.ts

@@ -0,0 +1 @@
+export { default } from './Section'

src/components/sections/Section/section.scss

@@ -0,0 +1,11 @@
+@import "src/styles/scaffold";
+
+.section {
+  width: 100vw;
+  content-visibility: auto;
+  contain-intrinsic-size: rem(2px) rem(1024px);
+
+  .title-section {
+    margin-bottom: var(--space-3);
+  }
+}

src/pages/index.tsx

@@ -7,6 +7,7 @@ import Hero from 'src/components/sections/Hero'
 import IncentivesHeader from 'src/components/sections/Incentives/IncentivesHeader'
 import ProductShelf from 'src/components/sections/ProductShelf'
 import ProductTiles from 'src/components/sections/ProductTiles'
+import Section from 'src/components/sections/Section'
 import { mark } from 'src/sdk/tests/mark'
 import type { PageProps } from 'gatsby'
 import type { HomePageQueryQuery } from '@generated/graphql'
@@ -57,7 +58,7 @@ function Page(props: Props) {
         Sections: Components imported from '../components/sections' only.
         Do not import or render components from any other folder in here.
       */}
-      <section className="page__section">
+      <Section>
         <Hero
           title="New Products Available"
           subtitle="At FastStore you can shop the best tech of 2022. Enjoy and get 10% off on your first purchase."
@@ -66,41 +67,41 @@ function Page(props: Props) {
           imageSrc="https://storeframework.vtexassets.com/arquivos/ids/190897/Photo.jpg"
           imageAlt="Quest 2 Controller on a table"
         />
-      </section>
+      </Section>
 
-      <section className="page__section">
+      <Section>
         <IncentivesHeader />
-      </section>
+      </Section>
 
-      <section className="page__section page__section-shelf / grid-section">
+      <Section className="page__section-shelf / grid-section">
         <h2 className="title-section / grid-content">Most Wanted</h2>
         <div className="page__section-content">
           <ProductShelf products={products?.slice(0, 5)} />
         </div>
-      </section>
+      </Section>
 
-      <section className="page__section / grid-section grid-content">
+      <Section className="grid-section grid-content">
         <h2 className="title-section">Just Arrived</h2>
         <div className="page__section-content">
           <ProductTiles products={products?.slice(5, 8)} />
         </div>
-      </section>
+      </Section>
 
-      <section className="page__section / grid-section">
+      <Section className="grid-section">
         <BannerText
           title="Receive our news and promotions in advance."
           caption="Enjoy and get 10% off on your first purchase."
           actionPath="/"
           actionLabel="Call to action"
         />
-      </section>
+      </Section>
 
-      <section className="page__section page__section-shelf / grid-section">
+      <Section className="page__section-shelf / grid-section">
         <h2 className="title-section / grid-content">Deals & Promotions</h2>
         <div className="page__section-content">
           <ProductShelf products={products?.slice(9, 14)} />
         </div>
-      </section>
+      </Section>
     </>
   )
 }

src/pages/s.tsx

@@ -1,17 +1,18 @@
 import { parseSearchState, SearchProvider, useSession } from '@faststore/sdk'
 import { graphql } from 'gatsby'
+import { GatsbySeo } from 'gatsby-plugin-next-seo'
 import React, { useMemo } from 'react'
 import ProductGallery from 'src/components/sections/ProductGallery'
+import Section from 'src/components/sections/Section'
+import SROnly from 'src/components/ui/SROnly'
 import { ITEMS_PER_PAGE } from 'src/constants'
 import { applySearchState } from 'src/sdk/search/state'
+import { mark } from 'src/sdk/tests/mark'
 import type { PageProps } from 'gatsby'
 import type {
   SearchPageQueryQuery,
   SearchPageQueryQueryVariables,
 } from '@generated/graphql'
-import { GatsbySeo } from 'gatsby-plugin-next-seo'
-import SROnly from 'src/components/ui/SROnly'
-import { mark } from 'src/sdk/tests/mark'
 
 export type Props = PageProps<
   SearchPageQueryQuery,
@@ -60,7 +61,9 @@ function Page(props: Props) {
       */}
       <SROnly as="h1" text={title} />
 
-      <ProductGallery title="Search Results" />
+      <Section>
+        <ProductGallery title="Search Results" />
+      </Section>
     </SearchProvider>
   )
 }

src/pages/{StoreCollection.slug}.tsx

@@ -3,14 +3,15 @@ import { graphql } from 'gatsby'
 import { BreadcrumbJsonLd, GatsbySeo } from 'gatsby-plugin-next-seo'
 import { Headphones as HeadphonesIcon } from 'phosphor-react'
 import React from 'react'
+import Breadcrumb from 'src/components/sections/Breadcrumb'
 import Hero from 'src/components/sections/Hero'
 import ProductGallery from 'src/components/sections/ProductGallery'
 import ProductShelf from 'src/components/sections/ProductShelf'
+import Section from 'src/components/sections/Section'
 import ScrollToTopButton from 'src/components/ui/ScrollToTopButton'
 import { ITEMS_PER_PAGE } from 'src/constants'
 import { useSearchParams } from 'src/hooks/useSearchParams'
 import { applySearchState } from 'src/sdk/search/state'
-import Breadcrumb from 'src/components/sections/Breadcrumb'
 import { mark } from 'src/sdk/tests/mark'
 import type { Props } from 'src/hooks/useSearchParams'
 
@@ -66,40 +67,40 @@ function Page(props: Props) {
         Do not import or render components from any other folder in here.
       */}
 
-      <section className="product-listing__breadcrumb / grid-content">
+      <Section className="product-listing__breadcrumb / grid-content">
         <Breadcrumb
           breadcrumbList={collection?.breadcrumbList.itemListElement}
           name={title}
         />
-      </section>
-
-      <div className="product-listing__hero">
-        <section className="page__section">
-          <Hero
-            variant="small"
-            title={title}
-            subtitle={`All the amazing ${title} from the brands we partner with.`}
-            imageSrc="https://storeframework.vtexassets.com/arquivos/ids/190897/Photo.jpg"
-            imageAlt="Quest 2 Controller on a table"
-            icon={<HeadphonesIcon size={48} weight="thin" />}
-          />
-        </section>
-      </div>
-
-      <ProductGallery title={title} />
+      </Section>
+
+      <Section className="product-listing__hero">
+        <Hero
+          variant="small"
+          title={title}
+          subtitle={`All the amazing ${title} from the brands we partner with.`}
+          imageSrc="https://storeframework.vtexassets.com/arquivos/ids/190897/Photo.jpg"
+          imageAlt="Quest 2 Controller on a table"
+          icon={<HeadphonesIcon size={48} weight="thin" />}
+        />
+      </Section>
+
+      <Section>
+        <ProductGallery title={title} />
+      </Section>
 
       {youMightAlsoLikeProducts?.length > 0 && (
-        <section className="page__section page__section-shelf page__section-divisor / grid-section">
+        <Section className="page__section-shelf page__section-divisor / grid-section">
           <h2 className="title-section / grid-content">You might also like</h2>
           <div className="page__section-content">
             <ProductShelf products={youMightAlsoLikeProducts.slice(0, 5)} />
           </div>
-        </section>
+        </Section>
       )}
 
-      <div className="product-listing__scroll-top">
+      <Section className="product-listing__scroll-top">
         <ScrollToTopButton />
-      </div>
+      </Section>
     </SearchProvider>
   )
 }

src/pages/{StoreProduct.slug}/p.tsx

@@ -7,13 +7,14 @@ import {
 } from 'gatsby-plugin-next-seo'
 import React from 'react'
 import ProductDetails from 'src/components/sections/ProductDetails'
+import ProductShelf from 'src/components/sections/ProductShelf'
+import Section from 'src/components/sections/Section'
+import { mark } from 'src/sdk/tests/mark'
 import type { PageProps } from 'gatsby'
 import type {
   ProductPageQueryQuery,
   ProductPageQueryQueryVariables,
 } from '@generated/graphql'
-import ProductShelf from 'src/components/sections/ProductShelf'
-import { mark } from 'src/sdk/tests/mark'
 
 export type Props = PageProps<
   ProductPageQueryQuery,
@@ -94,15 +95,17 @@ function Page(props: Props) {
         Do not import or render components from any other folder in here.
       */}
 
-      <ProductDetails product={product} />
+      <Section>
+        <ProductDetails product={product} />
+      </Section>
 
       {youMightAlsoLikeProducts?.length > 0 && (
-        <section className="page__section page__section-shelf page__section-divisor / grid-section">
+        <Section className="page__section-shelf page__section-divisor / grid-section">
           <h2 className="title-section / grid-content">You might also like</h2>
           <div className="page__section-content">
             <ProductShelf products={youMightAlsoLikeProducts.slice(0, 5)} />
           </div>
-        </section>
+        </Section>
       )}
     </>
   )