chore: Accept performance drop (#395)

vtex-sites · Mar 18, 2022 · 60df8f5 · 60df8f5
1 parent 157ac94
commit 60df8f5
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 76 deletions.
diff --git 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
@@ -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
@@ -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 = <ProductGrid page={0} pageSize={0} products={[]} />
+
 interface Props {
   title: string
 }
@@ -25,8 +27,8 @@ function ProductGallery({ title }: Props) {
   const [isFilterOpen, setIsFilterOpen] = useState<boolean>(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) {
     <Section className="product-listing / grid-content-full">
       <div className="product-listing__content-grid / grid-content">
         <div className="product-listing__filters">
-          <FilterSkeleton loading={orderedFacets?.length === 0}>
+          <FilterSkeleton loading={facets?.length === 0}>
             <Filter
               isOpen={isFilterOpen}
-              facets={orderedFacets}
+              facets={facets}
               onDismiss={() => setIsFilterOpen(false)}
             />
           </FilterSkeleton>
@@ -57,19 +59,11 @@ function ProductGallery({ title }: Props) {
         </div>
 
         <div className="product-listing__sort">
-          <SkeletonElement
-            shimmer
-            type="text"
-            loading={orderedFacets?.length === 0}
-          >
+          <SkeletonElement shimmer type="text" loading={facets?.length === 0}>
             <Sort />
           </SkeletonElement>
 
-          <SkeletonElement
-            shimmer
-            type="button"
-            loading={orderedFacets?.length === 0}
-          >
+          <SkeletonElement shimmer type="button" loading={facets?.length === 0}>
             <Button
               variant="tertiary"
               data-testid="open-filter-button"
@@ -109,7 +103,7 @@ function ProductGallery({ title }: Props) {
 
           {/* Render ALL products */}
           {data ? (
-            <>
+            <Suspense fallback={GalleryPageSkeleton}>
               {pages.map((page) => (
                 <GalleryPage
                   key={`gallery-page-${page}`}
@@ -119,27 +113,31 @@ function ProductGallery({ title }: Props) {
                   title={title}
                 />
               ))}
-            </>
+            </Suspense>
           ) : (
-            <ProductGrid page={0} pageSize={0} products={[]} />
+            GalleryPageSkeleton
           )}
 
           {/* Prefetch Previous and Next pages */}
           {prev !== false && (
-            <GalleryPage
-              showSponsoredProducts={false}
-              page={prev.cursor}
-              display={false}
-              title={title}
-            />
+            <Suspense fallback={null}>
+              <GalleryPage
+                showSponsoredProducts={false}
+                page={prev.cursor}
+                display={false}
+                title={title}
+              />
+            </Suspense>
           )}
           {next !== false && (
-            <GalleryPage
-              showSponsoredProducts={false}
-              page={next.cursor}
-              display={false}
-              title={title}
-            />
+            <Suspense fallback={null}>
+              <GalleryPage
+                showSponsoredProducts={false}
+                page={next.cursor}
+                display={false}
+                title={title}
+              />
+            </Suspense>
           )}
 
           {/* Add link to next page. This helps on SEO */}

diff --git a/...ctions/ProductGallery/useOrderedFacets.ts → ...ctions/ProductGallery/useDelayedFacets.ts b/...ctions/ProductGallery/useOrderedFacets.ts → ...ctions/ProductGallery/useDelayedFacets.ts
@@ -4,7 +4,7 @@ import type {
 } from '@generated/graphql'
 import { useMemo, useRef } from 'react'
 
-export const useOrderedFacets = (data?: ProductGalleryQueryQuery) => {
+export const useDelayedFacets = (data?: ProductGalleryQueryQuery) => {
   const facets = useRef<Filter_FacetsFragment[]>([])
 
   return useMemo(() => {

diff --git a/yarn.lock b/yarn.lock
@@ -1472,10 +1472,10 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
-"@faststore/api@^1.6.7":
-  version "1.6.7"
-  resolved "https://registry.yarnpkg.com/@faststore/api/-/api-1.6.7.tgz#8bc76ab1b8c57539f985c310d0419cc0b879daf2"
-  integrity sha512-q4DTn1f874wuClZsKbe3d81pHaoLyL1rjh3ye//4NmIVGHM5mO2N9ex7+RS+p4JieQDQ7/lylnCiPJ+TKUF5oA==
+"@faststore/api@^1.6.12":
+  version "1.6.12"
+  resolved "https://registry.yarnpkg.com/@faststore/api/-/api-1.6.12.tgz#97bf7ca43d753048a0d06de58e79eb964f214492"
+  integrity sha512-ksIOJF8UqY62GRdWwIYWg2iEeP35MmjfFEnejcZ2G1MTE7OmkPRgTTs3KoafksWRRmlCL0IJ/3p1eGA3p96sag==
   dependencies:
     "@graphql-tools/schema" "^8.2.0"
     "@rollup/plugin-graphql" "^1.0.0"
@@ -1485,17 +1485,17 @@
     isomorphic-unfetch "^3.1.0"
     p-limit "^3.1.0"
 
-"@faststore/sdk@^1.6.7":
-  version "1.6.7"
-  resolved "https://registry.yarnpkg.com/@faststore/sdk/-/sdk-1.6.7.tgz#25cf1b401b1fc15ebf71e9bf9ee76b77a79388df"
-  integrity sha512-gbnSP1PYaByLWIYpLaScMdJ6rNbSljhTg2Ct+oFLCvVNn7F3anRgI8szljECemvEOwkGYzRMkD//bsiIfJQCgw==
+"@faststore/sdk@^1.6.12":
+  version "1.6.12"
+  resolved "https://registry.yarnpkg.com/@faststore/sdk/-/sdk-1.6.12.tgz#3d9e7ec1a697ea686f44fb014d4dcb89c331a94a"
+  integrity sha512-mZ/H/5UTEQ4NKpiue/vqH7J+pvzjLUMMpOzH8SgPFdnw1f5fS31NBFUnk75mhDUWRnGKa8GXpZYcFgJgwR1TuQ==
   dependencies:
     idb-keyval "^5.1.3"
 
-"@faststore/ui@^1.6.7":
-  version "1.6.7"
-  resolved "https://registry.yarnpkg.com/@faststore/ui/-/ui-1.6.7.tgz#666df2673061279ed05d9df4cda2d8ee1e966140"
-  integrity sha512-1/rWCg/XoXU7HXEkIgxypvuRcTwEQwc0vz6IT87d38+sv7sGK96IfjaPNBdREkYuCcww3AL/OFkYeZAMB3fgVA==
+"@faststore/ui@^1.6.12":
+  version "1.6.12"
+  resolved "https://registry.yarnpkg.com/@faststore/ui/-/ui-1.6.12.tgz#88665a31b647c34da0d1f14e6b16337677e91454"
+  integrity sha512-/K/tBJZV6u+zTA6K4bUucbh5ze8b9rnjrEVRVrES8mGfMwdu5XVgXe3OHgWdfKJUXccrJADQGLtyG/+s2cdSaQ==
   dependencies:
     "@reach/popover" "^0.16.0"
     "@storybook/addon-a11y" "^6.4.4"
@@ -3047,40 +3047,40 @@
   resolved "https://registry.yarnpkg.com/@vercel/webpack-asset-relocator-loader/-/webpack-asset-relocator-loader-1.7.0.tgz#d3b707e0aba3111719f941dacb2408eff3c27319"
   integrity sha512-1Dy3BdOliDwxA7VZSIg55E1d/us2KvsCQOZV25fgufG//CsnZBGiSAL7qewTQf7YVHH0A9PHgzwMmKIZ8aFYVw==
 
-"@vtex/gatsby-plugin-nginx@^1.6.7":
-  version "1.6.7"
-  resolved "https://registry.yarnpkg.com/@vtex/gatsby-plugin-nginx/-/gatsby-plugin-nginx-1.6.7.tgz#c83bb101361b28a1a5bc5111003a205421e568ef"
-  integrity sha512-E9d6wrVLSjbWKVIJRqEEudXfZ7115FEgdncb88u/OHSZtwAqvzgDZPTesmm24ahP3mV15Rx3IUUsYlI/W7QTow==
+"@vtex/gatsby-plugin-nginx@^1.6.12":
+  version "1.6.12"
+  resolved "https://registry.yarnpkg.com/@vtex/gatsby-plugin-nginx/-/gatsby-plugin-nginx-1.6.12.tgz#c4a45e479ef4cf6034be4a3431f4e8fc464f77a6"
+  integrity sha512-u7XwTK09zFGjvJ9a55kcain3GkpL8yAejZGlLoW7anT8nXNio4Pb84TzCa/b2hhTGomMgYdm1//sPkrGuWL02Q==
   dependencies:
     kebab-hash "^0.1.2"
     webpack-assets-manifest "^5.0.6"
 
-"@vtex/gatsby-plugin-thumbor@^1.6.7":
-  version "1.6.7"
-  resolved "https://registry.yarnpkg.com/@vtex/gatsby-plugin-thumbor/-/gatsby-plugin-thumbor-1.6.7.tgz#7e101d6dad2d1b1d3caa282e49301c58f15250be"
-  integrity sha512-gBzaWTruPh2UNpced+DJMkjIMGUXPZC9jn2Wj73N8nF8nzA2SLE5KgaeVx7tKD8uyVKboFClP0KnW3baMx45Mg==
+"@vtex/gatsby-plugin-thumbor@^1.6.12":
+  version "1.6.12"
+  resolved "https://registry.yarnpkg.com/@vtex/gatsby-plugin-thumbor/-/gatsby-plugin-thumbor-1.6.12.tgz#4ada7485a527dc559ac05da2c90a281a9569b7d6"
+  integrity sha512-mXr91bCuXNRkSz82lqCPjWPjgnRKuC0B237jm1ZgKROUiOw/9kcFovjXT3dvwgCwjgC6LlIZMYqkNSHW+6YnCg==
 
-"@vtex/gatsby-source-store@^1.6.7":
-  version "1.6.7"
-  resolved "https://registry.yarnpkg.com/@vtex/gatsby-source-store/-/gatsby-source-store-1.6.7.tgz#8a505b71aab25006874c89ffc04ca13685b0f1b9"
-  integrity sha512-XQy6+ebXe1UFVIglXYili2BbXB2xY3JWpKBbqAYzXZAA2DLPFK8ObTuCThuP7PxrdxLV5a7ZVeDxoPQXVNpA1Q==
+"@vtex/gatsby-source-store@^1.6.12":
+  version "1.6.12"
+  resolved "https://registry.yarnpkg.com/@vtex/gatsby-source-store/-/gatsby-source-store-1.6.12.tgz#a8cef12a97ef0b6cec20ec98bcec42c756b69d60"
+  integrity sha512-vMUETBHX0HcI7aD2aH8rGIhJMMk7BFxc3A4k26BZXhWxEpOBgdsU6MDJZYsoquVn83JauLCEJbsYhCd7D9AF1g==
   dependencies:
     gatsby-graphql-source-toolkit "^2.0.1"
 
-"@vtex/graphql-utils@^1.6.7":
-  version "1.6.7"
-  resolved "https://registry.yarnpkg.com/@vtex/graphql-utils/-/graphql-utils-1.6.7.tgz#9375aafbbf6b7d923f1a6dd99f243483a631de00"
-  integrity sha512-rGNsSlQ5YLv7EdqVKdJqNQL4xh692g9FHfYZruxRXX/FFabzUq8kBk3XCj26O1YXQYDRbMGFwMV4kn8mXIVAmA==
+"@vtex/graphql-utils@^1.6.12":
+  version "1.6.12"
+  resolved "https://registry.yarnpkg.com/@vtex/graphql-utils/-/graphql-utils-1.6.12.tgz#5b676b304c18ce6bb250e9f78a6108859d89a7b7"
+  integrity sha512-lym3Cvoi2AqcxX/IDEAjAaTr8nTwu1T+1mhdWQ8dsfJW4GVBtpDybZUGVMVhnIEFTBSsrVsQFTM7oL4//uUKng==
   dependencies:
     "@babel/traverse" "^7.15.4"
     "@babel/types" "^7.15.6"
     "@graphql-codegen/plugin-helpers" "^2.2.0"
     "@graphql-tools/relay-operation-optimizer" "^6.4.0"
 
-"@vtex/lighthouse-config@^1.6.7":
-  version "1.6.7"
-  resolved "https://registry.yarnpkg.com/@vtex/lighthouse-config/-/lighthouse-config-1.6.7.tgz#e830dcd4f37f7fd242e970c94c1517836e840546"
-  integrity sha512-+q0jZ0j27sm4T7eKyD7nGKVzvKH73e9ydlbJ3t2qrUN51cS5/TzUh1jZJ2Xg2mG8+0hY/SXN+qiuzhBy67HjcA==
+"@vtex/lighthouse-config@^1.6.12":
+  version "1.6.12"
+  resolved "https://registry.yarnpkg.com/@vtex/lighthouse-config/-/lighthouse-config-1.6.12.tgz#d7883f08c490a608ac111a686b0ad9b03f92a1e3"
+  integrity sha512-Au1gODtMWRVdRmgllmaaTeJZSmpIKTCM40RzXrfhrbtiUvJj7DqNK6AL7HWhWdKuZKts64YgmF29yVGkTOtyNA==
 
 "@vtex/prettier-config@1.0.0":
   version "1.0.0"