diff --git a/CHANGELOG.md b/CHANGELOG.md index 5c5060f3..a4195448 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -46,6 +46,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed +- Fix hydration mismatch on PLPs at `?page=1` pagination - A bugged vertical gap with the `EmptyState` component inside the cart ([#20](https://github.com/vtex-sites/gatsby.store/pull/20)). - Some pages missing component styles because they weren't imported ([#20](https://github.com/vtex-sites/gatsby.store/pull/20)). - Fix Storybook initialization (#492) diff --git a/src/components/sections/ProductGallery/ProductGallery.tsx b/src/components/sections/ProductGallery/ProductGallery.tsx index ea3d9c9b..bee702d9 100644 --- a/src/components/sections/ProductGallery/ProductGallery.tsx +++ b/src/components/sections/ProductGallery/ProductGallery.tsx @@ -1,4 +1,4 @@ -import { usePagination, useSearch } from '@faststore/sdk' +import { useSearch } from '@faststore/sdk' import { GatsbySeo } from 'gatsby-plugin-next-seo' import { lazy, Suspense, useState } from 'react' import Filter from 'src/components/search/Filter' @@ -13,6 +13,7 @@ import { mark } from 'src/sdk/tests/mark' import Section from '../Section' import EmptyGallery from './EmptyGallery' import { useDelayedFacets } from './useDelayedFacets' +import { useDelayedPagination } from './useDelayedPagination' import { useGalleryQuery } from './useGalleryQuery' import { useProductsPrefetch } from './usePageProducts' @@ -31,7 +32,7 @@ function ProductGallery({ title, searchTerm }: Props) { const { data } = useGalleryQuery() const facets = useDelayedFacets(data) const totalCount = data?.search.products.pageInfo.totalCount ?? 0 - const { next, prev } = usePagination(totalCount) + const { next, prev } = useDelayedPagination(totalCount) useProductsPrefetch(prev ? prev.cursor : null) useProductsPrefetch(next ? next.cursor : null) diff --git a/src/components/sections/ProductGallery/useDelayedPagination.ts b/src/components/sections/ProductGallery/useDelayedPagination.ts new file mode 100644 index 00000000..c3f6feae --- /dev/null +++ b/src/components/sections/ProductGallery/useDelayedPagination.ts @@ -0,0 +1,16 @@ +import { usePagination as usePaginationSDK } from '@faststore/sdk' +import { useEffect, useState } from 'react' + +export const useDelayedPagination = (totalCount: number) => { + const pagination = usePaginationSDK(totalCount) + const [pag, setPag] = useState(() => ({ + next: false, + prev: false, + })) + + useEffect(() => { + setPag(pagination) + }, [pagination]) + + return pag +}