@faststore/core 3.1.0 → 3.1.1

package/.turbo/turbo-build.log

@@ -68,11 +68,11 @@ Route (pages)                              Size     First Load JS
   ├ chunks/framework-12a146e94cfcf7c4.js   45.4 kB
   ├ chunks/main-209ac4974b020af1.js        33.1 kB
   ├ chunks/pages/_app-e419b2062065ccf0.js  9.87 kB
-  ├ chunks/webpack-c139db73ca37b6f3.js     3.39 kB
+  ├ chunks/webpack-5c2cbf0d104592ed.js     3.39 kB
   └ css/ee0556daedda6306.css               3.07 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
 ○  (Static)  automatically rendered as static HTML (uses no initial props)
 ●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
 
-Done in 70.90s.
+Done in 71.48s.

package/.turbo/turbo-lint.log

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

package/.turbo/turbo-test.log

@@ -1,12 +1,12 @@
 yarn run v1.22.22
 $ jest
-PASS test/server/cms/index.test.ts (35.248 s)
-PASS test/utils/multipleTemplates.test.ts (35.354 s)
-PASS test/server/index.test.ts (38.448 s)
+PASS test/utils/multipleTemplates.test.ts (36.798 s)
+PASS test/server/cms/index.test.ts (36.975 s)
+PASS test/server/index.test.ts (40.537 s)
 
 Test Suites: 3 passed, 3 total
 Tests:       19 passed, 19 total
 Snapshots:   0 total
-Time:        39.56 s
+Time:        41.618 s
 Ran all test suites.
-Done in 41.68s.
+Done in 43.53s.

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.1.1](https://github.com/vtex/faststore/compare/v3.1.0...v3.1.1) (2024-12-09)
+
+### Bug Fixes
+
+- `Sentinel` rendering and wrong PLP's pagination behavior ([#2585](https://github.com/vtex/faststore/issues/2585)) ([ea59e77](https://github.com/vtex/faststore/commit/ea59e77fccee7866bd4e44b73e855dd5cee4ba6e)), closes [vtex-sites/starter.store#630](https://github.com/vtex-sites/starter.store/issues/630)
+
 # [3.1.0](https://github.com/vtex/faststore/compare/v3.0.160...v3.1.0) (2024-12-09)
 
 ### Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "license": "MIT",
   "repository": "vtex/faststore",
   "browserslist": "supports es6-module and not dead",
@@ -128,5 +128,5 @@
     "node": "18.19.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "f3cbb155a5cd6ecf7b48bc2eb7b24e83f6125c7b"
+  "gitHead": "632f3d65acbb92223571ab3789b23a96d363e6b5"
 }

package/src/components/product/ProductGrid/ProductGrid.tsx

@@ -9,6 +9,7 @@ import { ProductCardProps } from '../ProductCard'
 import { memo } from 'react'
 import ViewportObserver from 'src/components/cms/ViewportObserver'
 import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
+import useScreenResize from 'src/sdk/ui/useScreenResize'
 
 interface Props {
   /**
@@ -45,12 +46,12 @@ function ProductGrid({
   } = {},
   firstPage,
 }: Props) {
+  const { isMobile } = useScreenResize()
   const { __experimentalProductCard: ProductCard } =
     useOverrideComponents<'ProductGallery'>()
-  const aspectRatio = 1
 
-  // TODO: Check if is also isMobile
-  const isFirstPage = firstPage === page
+  const aspectRatio = 1
+  const isGridWithViewportObserver = isMobile && firstPage === page
 
   return (
     <ProductGridSkeleton
@@ -58,7 +59,7 @@ function ProductGrid({
       loading={products.length === 0}
     >
       <UIProductGrid>
-        {isFirstPage ? (
+        {isGridWithViewportObserver ? (
           <>
             {products.slice(0, 2).map(({ node: product }, idx) => (
               <UIProductGridItem key={`${product.id}`}>

package/src/components/ui/ProductGallery/ProductGalleryPage.tsx

@@ -28,13 +28,12 @@ function ProductGalleryPage({
   const products = data?.search?.products?.edges ?? []
 
   return (
-    <>
-      <Sentinel
-        products={products}
-        page={page}
-        pageSize={itemsPerPage}
-        title={title}
-      />
+    <Sentinel
+      products={products}
+      page={page}
+      pageSize={itemsPerPage}
+      title={title}
+    >
       <ProductGrid
         products={products}
         page={page}
@@ -42,7 +41,7 @@ function ProductGalleryPage({
         productCard={productCard}
         firstPage={firstPage}
       />
-    </>
+    </Sentinel>
   )
 }
 

package/src/sdk/search/Sentinel.tsx

@@ -1,14 +1,15 @@
 import { useSearch } from '@faststore/sdk'
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, type PropsWithChildren } from 'react'
 import { useInView } from 'react-intersection-observer'
 import type { NextRouter } from 'next/router'
 import { useRouter } from 'next/router'
 
 import type { ProductSummary_ProductFragment } from '@generated/graphql'
 
+import useScreenResize from 'src/sdk/ui/useScreenResize'
 import { useViewItemListEvent } from '../analytics/hooks/useViewItemListEvent'
 
-interface Props {
+interface SentinelProps {
   page: number
   pageSize: number
   title: string
@@ -38,19 +39,24 @@ const replacePagination = (page: string, router: NextRouter) => {
  * Also, this component's name is kind of curious. Wikipedia calls is Page Break(https://en.wikipedia.org/wiki/Page_break)
  * however all codes I've seen online use Sentinel
  */
-function Sentinel({ page, pageSize, products, title }: Props) {
-  const viewedRef = useRef(false)
-  const { ref, inView } = useInView()
-  const { pages } = useSearch()
-
+function Sentinel({
+  page,
+  pageSize,
+  products,
+  title,
+  children,
+}: PropsWithChildren<SentinelProps>) {
   const router = useRouter()
-
+  const { pages } = useSearch()
+  const { isMobile } = useScreenResize()
+  const { ref, inView } = useInView({ threshold: isMobile ? 0.3 : 0.7 })
   const { sendViewItemListEvent } = useViewItemListEvent({
     products,
     title,
     page,
     pageSize,
   })
+  const viewedRef = useRef(false)
 
   useEffect(() => {
     // Only replace pagination state when infinite scroll
@@ -72,7 +78,7 @@ function Sentinel({ page, pageSize, products, title }: Props) {
     products.length,
   ])
 
-  return <div ref={ref} />
+  return <div ref={ref}>{children}</div>
 }
 
 export default Sentinel