@faststore/core 4.6.0-dev.0 → 4.6.0-dev.1

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

@@ -0,0 +1,238 @@
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+  type PropsWithChildren,
+} from 'react'
+import { useSearch } from '@faststore/sdk'
+
+/** Coarse layout buckets — page height differs a lot across these. */
+export function getGalleryViewportBucket() {
+  if (globalThis.window === undefined) return 'ssr'
+  const width = globalThis.innerWidth
+  if (width <= 420) return 'mobile'
+  if (width <= 768) return 'tablet'
+  if (width < 1280) return 'notebook'
+  return 'desktop'
+}
+
+/** 32-bit string hash — avoids truncating long facet/path keys into collisions. */
+export function hashGalleryPageHeightKey(value: string) {
+  let hash = 0
+  for (const char of value) {
+    hash = Math.trunc(Math.imul(31, hash) + (char.codePointAt(0) ?? 0))
+  }
+  return (hash >>> 0).toString(36)
+}
+
+export function buildGalleryPageHeightKey(
+  page: number,
+  search: {
+    path: string
+    term: string | null
+    sort: string | null
+    selectedFacets: unknown
+    viewport?: string
+  }
+) {
+  const viewport = search.viewport ?? getGalleryViewportBucket()
+  const raw = JSON.stringify({
+    path: search.path,
+    term: search.term,
+    sort: search.sort,
+    selectedFacets: search.selectedFacets ?? [],
+    page,
+    viewport,
+  })
+  // Hash the full payload so long paths/facets never truncate page/viewport away.
+  return `__fs_gallery_page_h_p${page}_${viewport}_${hashGalleryPageHeightKey(raw)}`
+}
+
+export function readGalleryPageHeight(key: string): number | null {
+  try {
+    const raw = sessionStorage.getItem(key)
+    if (!raw) return null
+    const height = Number(raw)
+    return Number.isFinite(height) && height > 0 ? height : null
+  } catch {
+    return null
+  }
+}
+
+function writeGalleryPageHeight(key: string, height: number) {
+  try {
+    sessionStorage.setItem(key, String(Math.round(height)))
+  } catch {
+    // ignore quota / private mode
+  }
+}
+
+/**
+ * Sum of last-measured heights for the active infinite-scroll pages.
+ * Used to reserve space for the whole gallery before individual pages mount.
+ */
+export function getReservedGalleryHeight(
+  pages: number[],
+  search: {
+    path: string
+    term: string | null
+    sort: string | null
+    selectedFacets: unknown
+    viewport?: string
+  }
+) {
+  return pages.reduce((sum, page) => {
+    const height = readGalleryPageHeight(
+      buildGalleryPageHeightKey(page, search)
+    )
+    return sum + (height ?? 0)
+  }, 0)
+}
+
+/** Client-only reserved height for the results column while products load. */
+export function resolveReservedGalleryHeight(
+  hasProductsLoaded: boolean,
+  pages: number[],
+  search: {
+    path: string
+    term: string | null
+    sort: string | null
+    selectedFacets: unknown
+    viewport?: string
+  }
+) {
+  if (hasProductsLoaded) return 0
+  return getReservedGalleryHeight(pages, search)
+}
+
+type Props = PropsWithChildren<{
+  page: number
+}>
+
+/**
+ * Locks the gallery page slot to the last measured height **only while the
+ * skeleton is showing**. Once real product cards are mounted, the lock is
+ * released so a viewport resize cannot leave huge empty gaps between pages.
+ */
+function GalleryPageHeightLock({ page, children }: Props) {
+  const {
+    state: { term, sort, selectedFacets },
+  } = useSearch()
+
+  const [viewport, setViewport] = useState(getGalleryViewportBucket)
+
+  useEffect(() => {
+    const onResize = () => setViewport(getGalleryViewportBucket())
+    globalThis.addEventListener('resize', onResize)
+    return () => globalThis.removeEventListener('resize', onResize)
+  }, [])
+
+  const storageKey = useMemo(() => {
+    const path =
+      globalThis.window === undefined ? '' : globalThis.location.pathname
+    return buildGalleryPageHeightKey(page, {
+      path,
+      term: term ?? null,
+      sort: sort ?? null,
+      selectedFacets,
+      viewport,
+    })
+  }, [term, sort, selectedFacets, page, viewport])
+
+  const ref = useRef<HTMLDivElement>(null)
+  /** Height applied only while this page has no product cards yet. */
+  // Start null on SSR and first client paint; storageKey effect applies the
+  // sessionStorage value after mount to avoid hydration mismatches.
+  const [pendingMinHeight, setPendingMinHeight] = useState<number | null>(null)
+  const [isLocked, setIsLocked] = useState(true)
+
+  useEffect(() => {
+    setPendingMinHeight(readGalleryPageHeight(storageKey))
+    // Re-lock briefly when the viewport bucket / search key changes so back-nav
+    // skeletons on a new breakpoint still get the right reserved height.
+    setIsLocked(true)
+  }, [storageKey])
+
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+
+    const syncFromDom = () => {
+      const hasProducts = Boolean(
+        el.querySelector(
+          '[data-fs-product-card], a[data-testid="product-link"]'
+        )
+      )
+
+      if (!hasProducts) {
+        // Skeleton / empty — keep (or restore) the reserved minHeight.
+        setIsLocked(true)
+        return
+      }
+
+      // Products are visible: drop the lock so natural height can shrink on
+      // resize, then persist the unconstrained content height for next back-nav.
+      setIsLocked(false)
+
+      // Measure after minHeight is cleared (next frame).
+      requestAnimationFrame(() => {
+        const height = el.getBoundingClientRect().height
+        if (height < 80) return
+        const rounded = Math.round(height)
+        writeGalleryPageHeight(storageKey, rounded)
+        setPendingMinHeight(rounded)
+      })
+    }
+
+    syncFromDom()
+
+    const mutationObserver = new MutationObserver(syncFromDom)
+    mutationObserver.observe(el, { childList: true, subtree: true })
+
+    let resizeObserver: ResizeObserver | null = null
+    if (typeof ResizeObserver !== 'undefined') {
+      resizeObserver = new ResizeObserver(() => {
+        // Only persist when unlocked (real layout). Observing while locked
+        // would re-read the artificial minHeight and never shrink.
+        if (
+          !el.querySelector(
+            '[data-fs-product-card], a[data-testid="product-link"]'
+          )
+        ) {
+          return
+        }
+        const height = el.getBoundingClientRect().height
+        if (height < 80) return
+        const rounded = Math.round(height)
+        writeGalleryPageHeight(storageKey, rounded)
+        setPendingMinHeight(rounded)
+      })
+      resizeObserver.observe(el)
+    }
+
+    return () => {
+      mutationObserver.disconnect()
+      resizeObserver?.disconnect()
+    }
+    // Re-sync when children swap (e.g. skeleton → product grid). MutationObserver
+    // alone is not reliable across React rerenders in jsdom/CI.
+  }, [storageKey, children])
+
+  const style: CSSProperties | undefined =
+    isLocked && pendingMinHeight ? { minHeight: pendingMinHeight } : undefined
+
+  return (
+    <div
+      ref={ref}
+      data-fs-gallery-page-height-lock
+      data-fs-gallery-page={page}
+      style={style}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default GalleryPageHeightLock

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

@@ -1,6 +1,6 @@
 import { NextSeo } from 'next-seo'
 import dynamic from 'next/dynamic'
-import { Suspense, useState, type MouseEvent } from 'react'
+import { Suspense, useEffect, useState, type MouseEvent } from 'react'
 
 import { useSearch } from '@faststore/sdk'
 import { useUI } from '@faststore/ui'
@@ -24,6 +24,10 @@ import useScreenResize from 'src/sdk/ui/useScreenResize'
 
 import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
 import styles from '../../sections/ProductGallery/section.module.scss'
+import GalleryPageHeightLock, {
+  getGalleryViewportBucket,
+  resolveReservedGalleryHeight,
+} from './GalleryPageHeightLock'
 import ProductGalleryPage from './ProductGalleryPage'
 const FilterSkeleton = dynamic(
   () =>
@@ -33,8 +37,6 @@ const FilterSkeleton = dynamic(
     )
 )
 
-const GalleryPageSkeleton = <ProductGridSkeleton loading />
-
 export interface ProductGalleryProps {
   title?: string
   searchTerm?: string
@@ -131,7 +133,13 @@ function ProductGallery({
   } = useOverrideComponents<'ProductGallery'>()
 
   const { openFilter, filter: displayFilter } = useUI()
-  const { pages, addNextPage, addPrevPage, itemsPerPage } = useSearch()
+  const {
+    pages,
+    addNextPage,
+    addPrevPage,
+    itemsPerPage,
+    state: { term, sort, selectedFacets },
+  } = useSearch()
   const context = usePage<SearchPageContext | PLPContext>()
   const data = context?.data
   const facets = useDelayedFacets(data) ?? []
@@ -151,6 +159,25 @@ function ProductGallery({
     (data as PLPContext['data'])?.collection?.meta?.selectedFacets ?? []
   const filter = useFilter(facets, initialSelectedFacets)
 
+  // Keep the results column tall on PDP→PLP back nav before pages remount.
+  // Only while products are loading — once grids paint, natural height wins
+  // (avoids huge gaps after a viewport resize with a stale reserved minHeight).
+  // Populate after mount so SSR/hydration always start at 0 (sessionStorage is
+  // client-only and would otherwise mismatch).
+  const [reservedGalleryHeight, setReservedGalleryHeight] = useState(0)
+
+  useEffect(() => {
+    setReservedGalleryHeight(
+      resolveReservedGalleryHeight(hasProductsLoaded, pages, {
+        path: globalThis.location.pathname,
+        term: term ?? null,
+        sort: sort ?? null,
+        selectedFacets,
+        viewport: getGalleryViewportBucket(),
+      })
+    )
+  }, [pages, term, sort, selectedFacets, hasProductsLoaded])
+
   return (
     <section data-testid="product-gallery" data-fs-product-listing>
       {searchTerm && (
@@ -272,7 +299,14 @@ function ProductGallery({
               )}
             </FilterButtonSkeleton.Component>
           </div>
-          <div data-fs-product-listing-results>
+          <div
+            data-fs-product-listing-results
+            style={
+              reservedGalleryHeight > 0
+                ? { minHeight: reservedGalleryHeight }
+                : undefined
+            }
+          >
             {/* Add link to previous page. This helps on SEO */}
             {!!prev && (
               <div data-fs-product-listing-pagination="top">
@@ -313,25 +347,36 @@ function ProductGallery({
                 </LinkButtonPrev.Component>
               </div>
             )}
-            {/* Render ALL products */}
-            {hasProductsLoaded ? (
-              <Suspense fallback={GalleryPageSkeleton}>
-                {pages.map((page) => (
-                  <ProductGalleryPage
-                    key={`gallery-page-${page}`}
-                    page={page}
-                    title={title}
-                    productCard={productCard}
-                    itemsPerPage={itemsPerPage}
-                    firstPage={pages[0]}
-                    shouldShowComparison={showComparisonProducts}
-                    compareLabel={productComparison?.labels?.compareButton}
-                  />
-                ))}
-              </Suspense>
-            ) : (
-              GalleryPageSkeleton
-            )}
+            {/* Render ALL products.
+                Each page has its own Suspense boundary so a refetch on page N
+                does not unmount pages that already have data (avoids CLS when
+                returning from a PDP with infinite-scroll pages restored).
+                GalleryPageHeightLock keeps the last measured page height while
+                skeletons are shown so the list does not collapse — including
+                the initial !hasProductsLoaded frame. */}
+            {pages.map((page) => (
+              <GalleryPageHeightLock key={`gallery-page-${page}`} page={page}>
+                {hasProductsLoaded ? (
+                  <Suspense
+                    fallback={
+                      <ProductGridSkeleton loading count={itemsPerPage} />
+                    }
+                  >
+                    <ProductGalleryPage
+                      page={page}
+                      title={title}
+                      productCard={productCard}
+                      itemsPerPage={itemsPerPage}
+                      firstPage={pages[0]}
+                      shouldShowComparison={showComparisonProducts}
+                      compareLabel={productComparison?.labels?.compareButton}
+                    />
+                  </Suspense>
+                ) : (
+                  <ProductGridSkeleton loading count={itemsPerPage} />
+                )}
+              </GalleryPageHeightLock>
+            ))}
             {/* Add link to next page. This helps on SEO */}
             {next !== false && (
               <div data-fs-product-listing-pagination="bottom">