[FSSS-108] Feat: Add Skeleton Loading

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 - `GatsbyLink` to `Link` ui component.
+- `Skeleton` loading components.
 
 ### Changed
 - Replaces page type redirects, a.k.a. `/account`, `/login` to a corresponding file in `/pages` folder

cypress/integration/plp.test.js

@@ -43,13 +43,15 @@ describe('Search page Filters and Sorting options', () => {
             // Check if the filter applied actually brought the number of products it said it would
 
             cy.waitUntil(() => {
-              return cy.get('.product-grid').should('exist')
+              return cy.getById('total-product-count').should('exist')
             }).then(() => {
-              cy.getById('total-product-count').then(($countDiv) => {
-                expect(Number($countDiv.attr('data-count'))).to.eq(
-                  Number(quantity)
-                )
-              })
+              cy.getById('total-product-count')
+                .parent()
+                .then(($countDiv) => {
+                  expect(Number($countDiv.attr('data-count'))).to.eq(
+                    Number(quantity)
+                  )
+                })
             })
           })
       })

src/components/product/ProductGrid/ProductGrid.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import type { ProductSummary_ProductFragment } from '@generated/graphql'
+import ProductGridSkeleton from 'src/components/skeletons/ProductGridSkeleton'
 
 import ProductCard from '../ProductCard'
 import './product-grid.scss'
@@ -12,21 +13,23 @@ interface Props {
 
 function ProductGrid({ products, page, pageSize }: Props) {
   return (
-    <ul className="product-grid">
-      {products.map((product, idx) => (
-        <li key={`${product.id}`}>
-          <ProductCard
-            product={product}
-            index={pageSize * page + idx + 1}
-            bordered
-            outOfStock={
-              product.offers.offers?.[0].availability !==
-              'https://schema.org/InStock'
-            }
-          />
-        </li>
-      ))}
-    </ul>
+    <ProductGridSkeleton loading={products.length === 0}>
+      <ul className="product-grid">
+        {products.map((product, idx) => (
+          <li key={`${product.id}`}>
+            <ProductCard
+              product={product}
+              index={pageSize * page + idx + 1}
+              bordered
+              outOfStock={
+                product.offers.offers?.[0].availability !==
+                'https://schema.org/InStock'
+              }
+            />
+          </li>
+        ))}
+      </ul>
+    </ProductGridSkeleton>
   )
 }
 

src/components/sections/ProductGallery/ProductGallery.tsx

@@ -8,6 +8,9 @@ import React, { useState } from 'react'
 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 GalleryPage from './ProductGalleryPage'
 import { useGalleryQuery } from './useGalleryQuery'
@@ -33,35 +36,39 @@ function ProductGallery({ title, slug }: Props) {
     <div className="product-listing / grid-content-full">
       <div className="product-listing__content-grid / grid-content">
         <div className="product-listing__filters">
-          <Filter
-            slug={slug}
-            isOpen={isFilterOpen}
-            facets={orderedFacets}
-            onDismiss={() => setIsFilterOpen(false)}
-          />
+          <FilterSkeleton loading={orderedFacets?.length === 0}>
+            <Filter
+              slug={slug}
+              isOpen={isFilterOpen}
+              facets={orderedFacets}
+              onDismiss={() => setIsFilterOpen(false)}
+            />
+          </FilterSkeleton>
         </div>
 
-        <div
-          className="product-listing__results-count"
-          data-testid="total-product-count"
-          data-count={totalCount}
-        >
-          <h2>{totalCount} Results</h2>
+        <div className="product-listing__results-count" data-count={totalCount}>
+          <SkeletonElement shimmer type="text" loading={!data}>
+            <h2 data-testid="total-product-count">{totalCount} Results</h2>
+          </SkeletonElement>
         </div>
 
         <div className="product-listing__sort">
-          <Sort />
+          <SkeletonElement shimmer type="text" loading={!data}>
+            <Sort />
+          </SkeletonElement>
 
-          <Button
-            variant="tertiary"
-            data-testid="open-filter-button"
-            icon={<FadersHorizontalIcon size={16} />}
-            iconPosition="left"
-            aria-label="Open Filters"
-            onClick={() => setIsFilterOpen(!isFilterOpen)}
-          >
-            Filters
-          </Button>
+          <SkeletonElement shimmer type="button" loading={!data}>
+            <Button
+              variant="tertiary"
+              data-testid="open-filter-button"
+              icon={<FadersHorizontalIcon size={16} />}
+              iconPosition="left"
+              aria-label="Open Filters"
+              onClick={() => setIsFilterOpen(!isFilterOpen)}
+            >
+              Filters
+            </Button>
+          </SkeletonElement>
         </div>
 
         <div className="product-listing__results">
@@ -87,9 +94,9 @@ function ProductGallery({ title, slug }: Props) {
           )}
 
           {/* Render ALL products */}
-          <div className="product-listing__data-grid">
-            {data &&
-              pages.map((page) => (
+          {data ? (
+            <>
+              {pages.map((page) => (
                 <GalleryPage
                   key={`gallery-page-${page}`}
                   showSponsoredProducts={false}
@@ -98,7 +105,10 @@ function ProductGallery({ title, slug }: Props) {
                   title={title}
                 />
               ))}
-          </div>
+            </>
+          ) : (
+            <ProductGrid page={0} pageSize={0} products={[]} />
+          )}
 
           {/* Prefetch Previous and Next pages */}
           {prev !== false && (

src/components/sections/ProductGallery/product-gallery.scss

@@ -1,6 +1,5 @@
 @import "src/styles/scaffold";
 
-// Check it after apply Skeletons.
 .product-listing {
   --product-listing-row-height: var(--space-6);
 
@@ -29,19 +28,6 @@
   }
 }
 
-.product-listing__data-grid {
-  --product-listing-grid-height: 1750px;
-  --product-listing-row-height: var(--space-6);
-
-  min-height: calc(var(--product-listing-grid-height) - var(--product-listing-row-height));
-  contain-intrinsic-size: calc(var(--product-listing-grid-height) - var(--product-listing-row-height));
-  content-visibility: auto;
-
-  @include media(">=notebook") {
-    --product-listing-grid-height: 1016px;
-  }
-}
-
 .product-listing__filters {
   @include media(">=notebook") {
     position: sticky;
@@ -62,6 +48,11 @@
   padding: var(--space-1) var(--space-3) var(--space-2);
   background-color: var(--bg-neutral-lightest);
 
+  [data-element-variant="text"] {
+    min-width: rem(225px);
+    min-height: var(--space-5);
+  }
+
   @include media(">=notebook") {
     grid-column: 6 / span 7;
     justify-content: flex-end;
@@ -72,6 +63,10 @@
     .button[data-store-button] {
       display: none;
     }
+
+    [data-element-variant="button"] {
+      display: none;
+    }
   }
 }
 
@@ -92,9 +87,12 @@
     padding: 0;
     background-color: unset;
   }
+
+  [data-element-variant="text"] {
+    min-width: rem(130px);
+  }
 }
 
-// Check it after apply Skeletons.
 .product-listing__results {
   --padding: var(--space-1);
 

src/components/sections/ProductShelf/ProductShelf.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import type { ProductSummary_ProductFragment } from '@generated/graphql'
+import ProductShelfSkeleton from 'src/components/skeletons/ProductShelfSkeleton'
 
 import ProductCard from '../../product/ProductCard'
 
@@ -11,13 +12,15 @@ interface ProductShelfProps {
 
 function ProductShelf({ products }: ProductShelfProps) {
   return (
-    <ul data-product-shelf className="grid-content">
-      {products.map((product, idx) => (
-        <li key={`${product.id}`}>
-          <ProductCard product={product} index={idx + 1} />
-        </li>
-      ))}
-    </ul>
+    <ProductShelfSkeleton loading={products.length === 0}>
+      <ul data-product-shelf className="grid-content">
+        {products.map((product, idx) => (
+          <li key={`${product.id}`}>
+            <ProductCard product={product} index={idx + 1} />
+          </li>
+        ))}
+      </ul>
+    </ProductShelfSkeleton>
   )
 }
 

src/components/sections/ProductTiles/ProductTiles.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import Tiles, { Tile } from 'src/components/ui/Tiles'
 import ProductCard from 'src/components/product/ProductCard'
 import type { ProductSummary_ProductFragment } from '@generated/graphql'
+import ProductTilesSkeleton from 'src/components/skeletons/ProductTilesSkeleton'
 
 interface TilesProps {
   products: ProductSummary_ProductFragment[]
@@ -26,19 +27,21 @@ const getRatio = (products: number, idx: number) => {
 
 const ProductTiles = ({ products }: TilesProps) => {
   return (
-    <Tiles>
-      {products.map((product, idx) => (
-        <Tile key={product.id}>
-          <ProductCard
-            data-testid="tile-card"
-            product={product}
-            index={idx + 1}
-            variant="horizontal"
-            aspectRatio={getRatio(products.length, idx)}
-          />
-        </Tile>
-      ))}
-    </Tiles>
+    <ProductTilesSkeleton variant="horizontal" loading={products.length === 0}>
+      <Tiles>
+        {products.map((product, idx) => (
+          <Tile key={product.id}>
+            <ProductCard
+              data-testid="tile-card"
+              product={product}
+              index={idx + 1}
+              variant="horizontal"
+              aspectRatio={getRatio(products.length, idx)}
+            />
+          </Tile>
+        ))}
+      </Tiles>
+    </ProductTilesSkeleton>
   )
 }
 

src/components/skeletons/FilterSkeleton/FilterSkeleton.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import type { PropsWithChildren } from 'react'
+
+import Shimmer from '../Shimmer'
+import SkeletonElement from '../SkeletonElement'
+import './filter-skeleton.scss'
+
+interface Props {
+  loading?: boolean
+}
+
+function FilterSkeleton({
+  children,
+  loading = true,
+}: PropsWithChildren<Props>) {
+  return loading ? (
+    <div data-store-filter-skeleton>
+      <SkeletonElement shimmer type="text" />
+
+      <div data-filter-skeleton-content>
+        <SkeletonElement type="text" />
+        <SkeletonElement type="text" />
+        <SkeletonElement type="text" />
+        <Shimmer />
+      </div>
+    </div>
+  ) : (
+    <>{children}</>
+  )
+}
+
+export default FilterSkeleton

src/components/skeletons/FilterSkeleton/filter-skeleton.scss

@@ -0,0 +1,28 @@
+@import "src/styles/scaffold";
+
+[data-store-filter-skeleton] {
+  margin-top: var(--space-1);
+
+  @include media("<notebook") { display: none; }
+
+  [data-filter-skeleton-content] {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    padding: var(--space-1) var(--space-1) var(--space-0);
+    overflow: hidden;
+    border: var(--border-width-0) solid var(--color-border-display);
+    border-radius: var(--border-radius-default);
+
+    [data-element-variant="text"] {
+      min-width: 100%;
+      min-height: var(--space-8);
+      margin-bottom: var(--space-0);
+    }
+  }
+
+  [data-element-variant="text"] {
+    max-width: 30%;
+    margin-bottom: var(--space-2);
+  }
+}

src/components/skeletons/FilterSkeleton/index.ts

@@ -0,0 +1 @@
+export { default } from './FilterSkeleton'