From 60df8f516148492089c783840d929c5ad480e4d9 Mon Sep 17 00:00:00 2001 From: Tiago Gimenes Date: Fri, 18 Mar 2022 14:14:13 -0300 Subject: [PATCH] chore: Accept performance drop (#395) --- package.json | 16 ++--- .../product/ProductGrid/ProductGrid.tsx | 3 +- .../ProductGallery/ProductGallery.tsx | 66 +++++++++---------- ...seOrderedFacets.ts => useDelayedFacets.ts} | 2 +- yarn.lock | 64 +++++++++--------- 5 files changed, 75 insertions(+), 76 deletions(-) rename src/components/sections/ProductGallery/{useOrderedFacets.ts => useDelayedFacets.ts} (84%) diff --git a/package.json b/package.json index ad69e2677..ca4de2fdc 100644 --- a/package.json +++ b/package.json @@ -27,13 +27,13 @@ "@envelop/graphql-jit": "^1.1.1", "@envelop/parser-cache": "^2.2.0", "@envelop/validation-cache": "^2.2.0", - "@faststore/api": "^1.6.7", - "@faststore/sdk": "^1.6.7", - "@faststore/ui": "^1.6.7", - "@vtex/gatsby-plugin-nginx": "^1.6.7", - "@vtex/gatsby-plugin-thumbor": "^1.6.7", - "@vtex/gatsby-source-store": "^1.6.7", - "@vtex/graphql-utils": "^1.6.7", + "@faststore/api": "^1.6.12", + "@faststore/sdk": "^1.6.12", + "@faststore/ui": "^1.6.12", + "@vtex/gatsby-plugin-nginx": "^1.6.12", + "@vtex/gatsby-plugin-thumbor": "^1.6.12", + "@vtex/gatsby-source-store": "^1.6.12", + "@vtex/graphql-utils": "^1.6.12", "gatsby": "^3.14.3", "gatsby-plugin-gatsby-cloud": "^3.2.0", "gatsby-plugin-image": "^1.14.1", @@ -61,7 +61,7 @@ "@graphql-codegen/typescript-operations": "^2.1.8", "@testing-library/cypress": "^8.0.0", "@types/cypress": "^1.1.3", - "@vtex/lighthouse-config": "^1.6.7", + "@vtex/lighthouse-config": "^1.6.12", "@vtex/prettier-config": "1.0.0", "@vtex/tsconfig": "0.6.0", "autoprefixer": "^10.4.0", diff --git a/src/components/product/ProductGrid/ProductGrid.tsx b/src/components/product/ProductGrid/ProductGrid.tsx index e929b397e..5ad6ad510 100644 --- a/src/components/product/ProductGrid/ProductGrid.tsx +++ b/src/components/product/ProductGrid/ProductGrid.tsx @@ -1,8 +1,9 @@ import React from 'react' -import type { ProductSummary_ProductFragment } from '@generated/graphql' import ProductGridSkeleton from 'src/components/skeletons/ProductGridSkeleton' +import type { ProductSummary_ProductFragment } from '@generated/graphql' import ProductCard from '../ProductCard' + import './product-grid.scss' interface Props { diff --git a/src/components/sections/ProductGallery/ProductGallery.tsx b/src/components/sections/ProductGallery/ProductGallery.tsx index 515fbf541..6229822e0 100644 --- a/src/components/sections/ProductGallery/ProductGallery.tsx +++ b/src/components/sections/ProductGallery/ProductGallery.tsx @@ -1,22 +1,24 @@ import { usePagination, useSearch } from '@faststore/sdk' import { GatsbySeo } from 'gatsby-plugin-next-seo' -import React, { useState } from 'react' +import React, { lazy, Suspense, useState } from 'react' +import ProductGrid from 'src/components/product/ProductGrid' import Filter from 'src/components/search/Filter' import Sort from 'src/components/search/Sort' -import Button, { LinkButton } from 'src/components/ui/Button' -import SkeletonElement from 'src/components/skeletons/SkeletonElement' import FilterSkeleton from 'src/components/skeletons/FilterSkeleton' -import ProductGrid from 'src/components/product/ProductGrid' +import SkeletonElement from 'src/components/skeletons/SkeletonElement' +import Button, { LinkButton } from 'src/components/ui/Button' import Icon from 'src/components/ui/Icon' import Section from '../Section' -import GalleryPage from './ProductGalleryPage' import EmptyGallery from './EmptyGallery' +import { useDelayedFacets } from './useDelayedFacets' import { useGalleryQuery } from './useGalleryQuery' -import { useOrderedFacets } from './useOrderedFacets' import './product-gallery.scss' +const GalleryPage = lazy(() => import('./ProductGalleryPage')) +const GalleryPageSkeleton = + interface Props { title: string } @@ -25,8 +27,8 @@ function ProductGallery({ title }: Props) { const [isFilterOpen, setIsFilterOpen] = useState(false) const { pages, state: searchState, addNextPage, addPrevPage } = useSearch() const { data } = useGalleryQuery() + const facets = useDelayedFacets(data) const totalCount = data?.search.products.pageInfo.totalCount ?? 0 - const orderedFacets = useOrderedFacets(data) const { next, prev } = usePagination(totalCount) if (data && totalCount === 0) { @@ -41,10 +43,10 @@ function ProductGallery({ title }: Props) {
- + setIsFilterOpen(false)} /> @@ -57,19 +59,11 @@ function ProductGallery({ title }: Props) {
- + - +