From faf965845184ca20d53803bd75dd0cdd9d72f6b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Feij=C3=B3?= <lucas.portela@vtex.com.br>
Date: Tue, 8 Feb 2022 14:58:10 -0300
Subject: [PATCH 01/42] Add primitive element skeleton

---
 .../ElementSkeleton/ElementSkeleton.tsx       | 23 +++++++++++++
 .../ElementSkeleton/element-skeleton.scss     | 34 +++++++++++++++++++
 .../skeletons/ElementSkeleton/index.ts        |  1 +
 3 files changed, 58 insertions(+)
 create mode 100644 src/components/skeletons/ElementSkeleton/ElementSkeleton.tsx
 create mode 100644 src/components/skeletons/ElementSkeleton/element-skeleton.scss
 create mode 100644 src/components/skeletons/ElementSkeleton/index.ts

diff --git a/src/components/skeletons/ElementSkeleton/ElementSkeleton.tsx b/src/components/skeletons/ElementSkeleton/ElementSkeleton.tsx
new file mode 100644
index 000000000..10f4e992a
--- /dev/null
+++ b/src/components/skeletons/ElementSkeleton/ElementSkeleton.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+import Shimmer from '../Shimmer'
+
+import './element-skeleton.scss'
+
+type ElementVariant = 'text' | 'button' | 'image' | 'badge'
+
+interface Props {
+  shimmer?: boolean
+  type: ElementVariant
+}
+
+function ElementSkeleton({ type, shimmer = false }: Props) {
+  return (
+    <div data-store-element-skeleton data-shimmer={shimmer}>
+      <div data-element-skeleton data-element-variant={type} />
+      {shimmer && <Shimmer />}
+    </div>
+  )
+}
+
+export default ElementSkeleton
diff --git a/src/components/skeletons/ElementSkeleton/element-skeleton.scss b/src/components/skeletons/ElementSkeleton/element-skeleton.scss
new file mode 100644
index 000000000..d5d092f8f
--- /dev/null
+++ b/src/components/skeletons/ElementSkeleton/element-skeleton.scss
@@ -0,0 +1,34 @@
+[data-store-element-skeleton] {
+  &[data-shimmer="true"] {
+    position: relative;
+    overflow: hidden;
+  }
+
+  [data-element-skeleton] {
+    overflow: hidden;
+    background: var(--color-neutral-2);
+    border-radius: var(--border-radius-default);
+
+    &[data-element-variant="text"] {
+      width: 100%;
+      height: var(--space-4);
+    }
+
+    &[data-element-variant="button"] {
+      width: var(--space-13);
+      min-height: var(--tap-min-size);
+      column-gap: var(--space-2);
+      border-radius: var(--border-radius-button);
+    }
+
+    &[data-element-variant="image"] {
+      border-radius: var(--border-radius-default);
+    }
+
+    &[data-element-variant="badge"] {
+      width: 40%;
+      height: 30px;
+      border-radius: var(--border-radius-pill);
+    }
+  }
+}
diff --git a/src/components/skeletons/ElementSkeleton/index.ts b/src/components/skeletons/ElementSkeleton/index.ts
new file mode 100644
index 000000000..1670135e4
--- /dev/null
+++ b/src/components/skeletons/ElementSkeleton/index.ts
@@ -0,0 +1 @@
+export { default } from './ElementSkeleton'

From 3c5ec61bf625e367feefb7843bb4f8c6f810311e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Feij=C3=B3?= <lucas.portela@vtex.com.br>
Date: Tue, 8 Feb 2022 14:59:04 -0300
Subject: [PATCH 02/42] Add Filter skeleton

---
 .../FilterSkeleton/FilterSkeleton.tsx         | 22 +++++++++++++++
 .../FilterSkeleton/filter-skeleton.scss       | 28 +++++++++++++++++++
 .../skeletons/FilterSkeleton/index.ts         |  1 +
 3 files changed, 51 insertions(+)
 create mode 100644 src/components/skeletons/FilterSkeleton/FilterSkeleton.tsx
 create mode 100644 src/components/skeletons/FilterSkeleton/filter-skeleton.scss
 create mode 100644 src/components/skeletons/FilterSkeleton/index.ts

diff --git a/src/components/skeletons/FilterSkeleton/FilterSkeleton.tsx b/src/components/skeletons/FilterSkeleton/FilterSkeleton.tsx
new file mode 100644
index 000000000..92dc6645a
--- /dev/null
+++ b/src/components/skeletons/FilterSkeleton/FilterSkeleton.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+
+import Shimmer from '../Shimmer'
+import ElementSkeleton from '../ElementSkeleton'
+import './filter-skeleton.scss'
+
+function FilterSkeleton() {
+  return (
+    <div data-store-filter-skeleton>
+      <ElementSkeleton shimmer type="text" />
+
+      <div data-filter-skeleton-content>
+        <ElementSkeleton type="text" />
+        <ElementSkeleton type="text" />
+        <ElementSkeleton type="text" />
+        <Shimmer />
+      </div>
+    </div>
+  )
+}
+
+export default FilterSkeleton
diff --git a/src/components/skeletons/FilterSkeleton/filter-skeleton.scss b/src/components/skeletons/FilterSkeleton/filter-skeleton.scss
new file mode 100644
index 000000000..ea1f47861
--- /dev/null
+++ b/src/components/skeletons/FilterSkeleton/filter-skeleton.scss
@@ -0,0 +1,28 @@
+@import "../../../styles/vendors/include-media";
+
+[data-store-filter-skeleton] {
+  @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: 1px solid var(--color-border-display);
+    border-radius: var(--border-radius-default);
+
+    [data-element-variant="text"] {
+      min-width: 100%;
+      min-height: 60px;
+      margin-bottom: var(--space-0);
+    }
+  }
+
+  [data-element-variant="text"] {
+    max-width: 30%;
+    margin-bottom: var(--space-2);
+  }
+}
diff --git a/src/components/skeletons/FilterSkeleton/index.ts b/src/components/skeletons/FilterSkeleton/index.ts
new file mode 100644
index 000000000..3224f597c
--- /dev/null
+++ b/src/components/skeletons/FilterSkeleton/index.ts
@@ -0,0 +1 @@
+export { default } from './FilterSkeleton'

From c6e1df42a4359a0c60f067081cca60c146a6bc36 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Feij=C3=B3?= <lucas.portela@vtex.com.br>
Date: Tue, 8 Feb 2022 15:04:59 -0300
Subject: [PATCH 03/42] Add ProductCard skeleton

---
 .../ProductCardSkeleton.tsx                   | 38 ++++++++++++
 .../skeletons/ProductCardSkeleton/index.ts    |  1 +
 .../product-card-skeleton.scss                | 60 +++++++++++++++++++
 3 files changed, 99 insertions(+)
 create mode 100644 src/components/skeletons/ProductCardSkeleton/ProductCardSkeleton.tsx
 create mode 100644 src/components/skeletons/ProductCardSkeleton/index.ts
 create mode 100644 src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss

diff --git a/src/components/skeletons/ProductCardSkeleton/ProductCardSkeleton.tsx b/src/components/skeletons/ProductCardSkeleton/ProductCardSkeleton.tsx
new file mode 100644
index 000000000..f80bbf2b3
--- /dev/null
+++ b/src/components/skeletons/ProductCardSkeleton/ProductCardSkeleton.tsx
@@ -0,0 +1,38 @@
+import React from 'react'
+
+import Shimmer from '../Shimmer'
+import ElementSkeleton from '../ElementSkeleton'
+import './product-card-skeleton.scss'
+
+interface Props {
+  bordered?: boolean
+  showActions?: boolean
+  variant?: 'vertical' | 'horizontal'
+}
+
+const ProductCardSkeleton = ({
+  bordered,
+  showActions = false,
+  variant = 'vertical',
+}: Props) => {
+  return (
+    <div
+      data-store-product-card-skeleton
+      data-bordered={bordered}
+      data-variant={variant}
+    >
+      <div>
+        <ElementSkeleton type="image" />
+      </div>
+      <div data-product-card-skeleton-content>
+        <ElementSkeleton type="text" />
+        <ElementSkeleton type="text" />
+        <ElementSkeleton type="badge" />
+        {showActions && <ElementSkeleton type="button" />}
+      </div>
+      <Shimmer />
+    </div>
+  )
+}
+
+export default ProductCardSkeleton
diff --git a/src/components/skeletons/ProductCardSkeleton/index.ts b/src/components/skeletons/ProductCardSkeleton/index.ts
new file mode 100644
index 000000000..852a53006
--- /dev/null
+++ b/src/components/skeletons/ProductCardSkeleton/index.ts
@@ -0,0 +1 @@
+export { default } from './ProductCardSkeleton'
diff --git a/src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss b/src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss
new file mode 100644
index 000000000..5058f0e1a
--- /dev/null
+++ b/src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss
@@ -0,0 +1,60 @@
+@import "../../../styles/vendors/include-media.scss";
+
+[data-store-product-card-skeleton] {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 14rem;
+  height: 100%;
+  padding: var(--space-1) var(--space-1) var(--space-2);
+  overflow: hidden;
+  border: 1px solid transparent;
+  border-radius: var(--border-radius-default);
+
+  &[data-bordered="true"] { border: 1px solid var(--color-border-display); }
+
+  &[data-variant="vertical"] {
+    [data-card-content] { padding-top: var(--space-2); }
+  }
+
+  &[data-variant="horizontal"] {
+    [data-card-content] {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      padding: var(--space-3);
+    }
+  }
+
+  [data-element-variant="image"] {
+    min-width: 100%;
+    min-height: 162px;
+    max-height: 607px;
+
+    @include media(">=notebook") { height: 190px; }
+  }
+
+  [data-product-card-skeleton-content] {
+    position: relative;
+    height: 20%;
+    margin-top: var(--space-2);
+
+    [data-element-variant="text"] { margin-bottom: var(--space-2); }
+
+    [data-element-variant="button"] { margin-top: var(--space-4); }
+
+    [data-element-variant="badge"] {
+      min-width: 30%;
+
+      @include media(">=notebook") {
+        min-height: 30px;
+        margin-top: var(--space-4);
+      }
+
+      @include media(">=tablet") {
+        min-width: 20%;
+        max-width: 20%;
+      }
+    }
+  }
+}

From f44cdc33cdf84913d975fd856adcbd79a6daccf9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Feij=C3=B3?= <lucas.portela@vtex.com.br>
Date: Tue, 8 Feb 2022 15:08:41 -0300
Subject: [PATCH 04/42] Add ProductTile skeleton

---
 .../ProductTileSkeleton.tsx                   |  45 +++++
 .../skeletons/ProductTileSkeleton/index.ts    |   1 +
 .../product-tile-skeleton.scss                | 170 ++++++++++++++++++
 3 files changed, 216 insertions(+)
 create mode 100644 src/components/skeletons/ProductTileSkeleton/ProductTileSkeleton.tsx
 create mode 100644 src/components/skeletons/ProductTileSkeleton/index.ts
 create mode 100644 src/components/skeletons/ProductTileSkeleton/product-tile-skeleton.scss

diff --git a/src/components/skeletons/ProductTileSkeleton/ProductTileSkeleton.tsx b/src/components/skeletons/ProductTileSkeleton/ProductTileSkeleton.tsx
new file mode 100644
index 000000000..4d40166e9
--- /dev/null
+++ b/src/components/skeletons/ProductTileSkeleton/ProductTileSkeleton.tsx
@@ -0,0 +1,45 @@
+import React from 'react'
+
+import Shimmer from '../Shimmer'
+import ElementSkeleton from '../ElementSkeleton'
+import './product-tile-skeleton.scss'
+
+interface Props {
+  tileIndex: number
+  bordered?: boolean
+  variant?: 'vertical' | 'horizontal'
+}
+
+const ProductTileSkeleton = ({
+  tileIndex,
+  bordered,
+  variant = 'vertical',
+}: Props) => {
+  return (
+    <div
+      data-store-product-tile-skeleton
+      data-tile-index={tileIndex}
+      data-bordered={bordered}
+      data-variant={variant}
+    >
+      <div data-product-tile-skeleton-image data-tile-index={tileIndex}>
+        <ElementSkeleton type="image" />
+      </div>
+      <div data-product-tile-skeleton-content data-tile-index={tileIndex}>
+        <div data-product-tile-skeleton-text data-tile-index={tileIndex}>
+          <ElementSkeleton type="text" />
+          <div data-product-tile-skeleton-price>
+            <ElementSkeleton type="text" data-product-tile-skeleton-price />
+          </div>
+        </div>
+
+        <div data-product-tile-skeleton-badge data-tile-index={tileIndex}>
+          <ElementSkeleton type="badge" />
+        </div>
+      </div>
+      <Shimmer />
+    </div>
+  )
+}
+
+export default ProductTileSkeleton
diff --git a/src/components/skeletons/ProductTileSkeleton/index.ts b/src/components/skeletons/ProductTileSkeleton/index.ts
new file mode 100644
index 000000000..6c876886c
--- /dev/null
+++ b/src/components/skeletons/ProductTileSkeleton/index.ts
@@ -0,0 +1 @@
+export { default } from './ProductTileSkeleton'
diff --git a/src/components/skeletons/ProductTileSkeleton/product-tile-skeleton.scss b/src/components/skeletons/ProductTileSkeleton/product-tile-skeleton.scss
new file mode 100644
index 000000000..edeb491eb
--- /dev/null
+++ b/src/components/skeletons/ProductTileSkeleton/product-tile-skeleton.scss
@@ -0,0 +1,170 @@
+@import "../../../styles/vendors/include-media.scss";
+
+[data-store-product-tile-skeleton] {
+  position: relative;
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  height: 100%;
+  padding: 0;
+  overflow: hidden;
+
+  &[data-tile-index="1"] {
+    min-width: 9rem;
+    height: 24rem;
+
+    @include media(">=tablet") { height: 28rem; }
+  }
+
+  &[data-variant="horizontal"] {
+    [data-product-tile-skeleton-content] {
+      background-color: var(--bg-neutral-light);
+
+      @include media(">=tablet") {
+        padding: var(--space-2) var(--space-3) var(--space-3);
+      }
+    }
+  }
+
+  [data-product-tile-skeleton-image] {
+    height: 60%;
+    min-height: 60%;
+    border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;
+
+    @include media(">=tablet") {
+      height: 70%;
+      min-height: 70%;
+    }
+
+    @include media(">=notebook") {
+      height: 80%;
+      min-height: 80%;
+    }
+
+    &[data-tile-index="1"] {
+      height: 80%;
+
+      @include media(">=tablet") {
+        height: 70%;
+        min-height: 70%;
+      }
+
+      @include media(">=notebook") {
+        height: 80%;
+        min-height: 80%;
+      }
+    }
+
+    [data-store-element-skeleton] { height: 100%; }
+
+    [data-element-variant="image"] {
+      width: 100%;
+      height: 100%;
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  [data-product-tile-skeleton-content] {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    height: 40%;
+    padding: var(--space-3);
+    border-bottom-right-radius: var(--border-radius-default);
+    border-bottom-left-radius: var(--border-radius-default);
+
+    @include media(">=tablet") {
+      flex-flow: row wrap;
+      height: 30%;
+    }
+
+    @include media(">=notebook") {
+      flex-flow: row wrap;
+      height: 20%;
+    }
+
+    &[data-tile-index="1"] {
+      height: 20%;
+      padding: var(--space-2) var(--space-3);
+
+      @include media(">=tablet") {
+        flex-flow: row wrap;
+        height: 30%;
+      }
+
+      @include media(">=notebook") { height: 20%; }
+    }
+
+    [data-product-tile-skeleton-text] {
+      width: 70%;
+
+      @include media(">=tablet") {
+        width: 50%;
+
+        &[data-tile-index="2"],
+        &[data-tile-index="3"] { width: 100%; }
+      }
+
+      @include media(">=notebook") {
+        width: 60%;
+
+        &[data-tile-index="2"],
+        &[data-tile-index="3"] { width: 60%; }
+      }
+
+      [data-element-variant="text"] { margin-bottom: var(--space-1); }
+
+      [data-product-tile-skeleton-price] {
+        width: 60%;
+
+        @include media(">=tablet") { width: 100%; }
+      }
+    }
+
+    [data-product-tile-skeleton-badge] {
+      position: absolute;
+      right: var(--space-1);
+      width: 20%;
+
+      @include media(">=tablet") { width: 20%; }
+
+      &[data-tile-index="2"],
+      &[data-tile-index="3"] {
+        bottom: var(--space-2);
+        left: var(--space-3);
+        width: 30%;
+
+        @include media(">=tablet") {
+          position: relative;
+          bottom: 0;
+          left: var(--space-2);
+          width: 50%;
+        }
+
+        @include media(">=notebook") {
+          position: absolute;
+          right: var(--space-1);
+          bottom: unset;
+          left: unset;
+          width: 30%;
+        }
+      }
+
+      [data-element-variant="badge"] {
+        width: 100%;
+        height: var(--space-4);
+
+        @include media(">=tablet") {
+          position: absolute;
+          right: var(--space-1);
+        }
+
+        @include media(">=notebook") {
+          position: relative;
+          right: var(--space-0);
+        }
+      }
+    }
+  }
+}

From 9a183c1b6c6005a4c3eae69b64734a1b5150c4b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Feij=C3=B3?= <lucas.portela@vtex.com.br>
Date: Tue, 8 Feb 2022 15:10:35 -0300
Subject: [PATCH 05/42] Add Shimmer component to handle shimmer effect

---
 src/components/skeletons/Shimmer/Shimmer.tsx  | 13 ++++++++++
 src/components/skeletons/Shimmer/index.ts     |  1 +
 src/components/skeletons/Shimmer/shimmer.scss | 24 +++++++++++++++++++
 3 files changed, 38 insertions(+)
 create mode 100644 src/components/skeletons/Shimmer/Shimmer.tsx
 create mode 100644 src/components/skeletons/Shimmer/index.ts
 create mode 100644 src/components/skeletons/Shimmer/shimmer.scss

diff --git a/src/components/skeletons/Shimmer/Shimmer.tsx b/src/components/skeletons/Shimmer/Shimmer.tsx
new file mode 100644
index 000000000..c67116ec7
--- /dev/null
+++ b/src/components/skeletons/Shimmer/Shimmer.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+
+import './shimmer.scss'
+
+const Shimmer = () => {
+  return (
+    <div data-store-shimmer>
+      <div data-shimmer />
+    </div>
+  )
+}
+
+export default Shimmer
diff --git a/src/components/skeletons/Shimmer/index.ts b/src/components/skeletons/Shimmer/index.ts
new file mode 100644
index 000000000..e0f129d4d
--- /dev/null
+++ b/src/components/skeletons/Shimmer/index.ts
@@ -0,0 +1 @@
+export { default } from './Shimmer'
diff --git a/src/components/skeletons/Shimmer/shimmer.scss b/src/components/skeletons/Shimmer/shimmer.scss
new file mode 100644
index 000000000..0d2b27edc
--- /dev/null
+++ b/src/components/skeletons/Shimmer/shimmer.scss
@@ -0,0 +1,24 @@
+[data-store-shimmer] {
+  /* parent: position relative & overflow hidden */
+  position: absolute;
+
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  animation: loading 1.2s infinite;
+
+  [data-shimmer] {
+    width: 50%;
+    height: 100%;
+    background: rgb(255 255 255 / 20%);
+    transform: skewX(-20deg);
+    box-shadow: 0 0 var(--space-5) var(--space-5) rgb(255 255 255 / 20%);
+  }
+}
+
+@keyframes loading {
+  0% { transform: translateX(-150%); }
+  50% { transform: translateX(-60%); }
+  100% { transform: translateX(150%); }
+}

From 3d641ff95d09709dc7a574b45fc0e0680a7e535b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Feij=C3=B3?= <lucas.portela@vtex.com.br>
Date: Wed, 9 Feb 2022 16:39:49 -0300
Subject: [PATCH 06/42] Use skeleton components in the ProductGallery

---
 .../sections/ProductGallery/product-gallery.scss         | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/sections/ProductGallery/product-gallery.scss b/src/components/sections/ProductGallery/product-gallery.scss
index f5eea37d6..fae2d3546 100644
--- a/src/components/sections/ProductGallery/product-gallery.scss
+++ b/src/components/sections/ProductGallery/product-gallery.scss
@@ -62,6 +62,11 @@
   padding: var(--space-1) var(--space-3) var(--space-2);
   background-color: var(--bg-neutral-lightest);
 
+  [data-element-variant="text"] {
+    min-width: 225px;
+    min-height: var(--space-5);
+  }
+
   @include media(">=notebook") {
     grid-column: 6 / span 7;
     justify-content: flex-end;
@@ -92,6 +97,10 @@
     padding: 0;
     background-color: unset;
   }
+
+  [data-element-variant="text"] {
+    min-width: 130px;
+  }
 }
 
 // Check it after apply Skeletons.

From 9247fdeaf842eb1c8464bdc7f4034dc577ecf926 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Feij=C3=B3?= <lucas.portela@vtex.com.br>
Date: Wed, 9 Feb 2022 16:45:43 -0300
Subject: [PATCH 07/42] Fix product card skeleton for tablet/mobile version

---
 .../ProductCardSkeleton/product-card-skeleton.scss     | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss b/src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss
index 5058f0e1a..ad09fb5a1 100644
--- a/src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss
+++ b/src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss
@@ -4,7 +4,6 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  min-width: 14rem;
   height: 100%;
   padding: var(--space-1) var(--space-1) var(--space-2);
   overflow: hidden;
@@ -22,16 +21,17 @@
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
-      padding: var(--space-3);
     }
   }
 
   [data-element-variant="image"] {
     min-width: 100%;
-    min-height: 162px;
-    max-height: 607px;
+    min-height: 45vw;
 
-    @include media(">=notebook") { height: 190px; }
+    @include media(">=notebook") {
+      height: 190px;
+      min-height: unset;
+    }
   }
 
   [data-product-card-skeleton-content] {

From 70d1f291200a5ac757bbed5e51ba6439cc60e859 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Feij=C3=B3?= <lucas.portela@vtex.com.br>
Date: Wed, 9 Feb 2022 16:50:37 -0300
Subject: [PATCH 08/42] Use skeleton components in the homepage (ProductShelf,
 ProductTiles and ProductGrid)

---
 .../product/ProductGrid/ProductGrid.tsx       | 48 ++++++++++++++-----
 .../sections/ProductShelf/ProductShelf.tsx    | 25 ++++++++--
 .../sections/ProductTiles/ProductTiles.tsx    |  7 +++
 src/pages/index.tsx                           | 43 +++++++----------
 4 files changed, 80 insertions(+), 43 deletions(-)

diff --git a/src/components/product/ProductGrid/ProductGrid.tsx b/src/components/product/ProductGrid/ProductGrid.tsx
index b96c426f7..1578b0b99 100644
--- a/src/components/product/ProductGrid/ProductGrid.tsx
+++ b/src/components/product/ProductGrid/ProductGrid.tsx
@@ -1,9 +1,25 @@
 import React from 'react'
 import type { ProductSummary_ProductFragment } from '@generated/graphql'
+import ProductCardSkeleton from 'src/components/skeletons/ProductCardSkeleton'
 
 import ProductCard from '../ProductCard'
 import './product-grid.scss'
 
+const SKELETON_PRODUCTS: Readonly<JSX.Element[]> = [
+  <ProductCardSkeleton bordered key="0" />,
+  <ProductCardSkeleton bordered key="1" />,
+  <ProductCardSkeleton bordered key="2" />,
+  <ProductCardSkeleton bordered key="3" />,
+  <ProductCardSkeleton bordered key="4" />,
+  <ProductCardSkeleton bordered key="5" />,
+  <ProductCardSkeleton bordered key="6" />,
+  <ProductCardSkeleton bordered key="7" />,
+  <ProductCardSkeleton bordered key="8" />,
+  <ProductCardSkeleton bordered key="9" />,
+  <ProductCardSkeleton bordered key="10" />,
+  <ProductCardSkeleton bordered key="11" />,
+]
+
 interface Props {
   products: ProductSummary_ProductFragment[]
   page: number
@@ -11,21 +27,27 @@ interface Props {
 }
 
 function ProductGrid({ products, page, pageSize }: Props) {
+  const haveProducts = products && products?.length > 0
+
   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>
-      ))}
+      {haveProducts
+        ? 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>
+          ))
+        : SKELETON_PRODUCTS.map((skeleton, index) => (
+            <li key={String(index)}>{skeleton}</li>
+          ))}
     </ul>
   )
 }
diff --git a/src/components/sections/ProductShelf/ProductShelf.tsx b/src/components/sections/ProductShelf/ProductShelf.tsx
index db12a007c..abfc272bd 100644
--- a/src/components/sections/ProductShelf/ProductShelf.tsx
+++ b/src/components/sections/ProductShelf/ProductShelf.tsx
@@ -1,22 +1,37 @@
 import React from 'react'
 import type { ProductSummary_ProductFragment } from '@generated/graphql'
+import ProductCardSkeleton from 'src/components/skeletons/ProductCardSkeleton'
 
 import ProductCard from '../../product/ProductCard'
 
 import './product-shelf.scss'
 
+const SKELETON_PRODUCTS: Readonly<JSX.Element[]> = [
+  <ProductCardSkeleton key="0" />,
+  <ProductCardSkeleton key="1" />,
+  <ProductCardSkeleton key="2" />,
+  <ProductCardSkeleton key="3" />,
+  <ProductCardSkeleton key="4" />,
+]
+
 interface ProductShelfProps {
   products: ProductSummary_ProductFragment[]
 }
 
 function ProductShelf({ products }: ProductShelfProps) {
+  const haveProducts = products && products?.length > 0
+
   return (
     <ul data-product-shelf className="grid-content">
-      {products.map((product, idx) => (
-        <li key={`${product.id}`}>
-          <ProductCard product={product} index={idx + 1} />
-        </li>
-      ))}
+      {!haveProducts
+        ? SKELETON_PRODUCTS.map((skeleton, index) => (
+            <li key={String(index)}>{skeleton}</li>
+          ))
+        : products.map((product, idx) => (
+            <li key={`${product.id}`}>
+              <ProductCard product={product} index={idx + 1} />
+            </li>
+          ))}
     </ul>
   )
 }
diff --git a/src/components/sections/ProductTiles/ProductTiles.tsx b/src/components/sections/ProductTiles/ProductTiles.tsx
index 5c377bf59..69d8d8418 100644
--- a/src/components/sections/ProductTiles/ProductTiles.tsx
+++ b/src/components/sections/ProductTiles/ProductTiles.tsx
@@ -2,6 +2,13 @@ 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 ProductTileSkeleton from 'src/components/skeletons/ProductTileSkeleton'
+
+const SKELETON_PRODUCTS: Readonly<JSX.Element[]> = [
+  <ProductTileSkeleton key="0" tileIndex={1} variant="horizontal" />,
+  <ProductTileSkeleton key="1" tileIndex={2} variant="horizontal" />,
+  <ProductTileSkeleton key="2" tileIndex={3} variant="horizontal" />,
+]
 
 interface TilesProps {
   products: ProductSummary_ProductFragment[]
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 2d5f01d7e..f8e72c7fc 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -24,7 +24,6 @@ function Page(props: Props) {
   const title = site?.siteMetadata?.title ?? ''
   const siteUrl = `https://${host}${pathname}`
   const products = allStoreProduct?.nodes
-  const haveProducts = products && products?.length > 0
 
   return (
     <>
@@ -73,23 +72,19 @@ function Page(props: Props) {
         <IncentivesHeader />
       </section>
 
-      {haveProducts && (
-        <section className="page__section page__section-shelf / grid-section">
-          <h2 className="title-section / grid-content">Most Wanted</h2>
-          <div className="page__section-content">
-            <ProductShelf products={products.slice(0, 5)} />
-          </div>
-        </section>
-      )}
+      <section className="page__section page__section-shelf / grid-section">
+        <h2 className="title-section / grid-content">Most Wanted</h2>
+        <div className="page__section-content">
+          <ProductShelf products={products?.slice(0, 5)} />
+        </div>
+      </section>
 
-      {haveProducts && (
-        <section className="page__section / grid-section grid-content">
-          <h2 className="title-section">Just Arrived</h2>
-          <div className="page__section-content">
-            <ProductTiles products={products.slice(5, 8)} />
-          </div>
-        </section>
-      )}
+      <section className="page__section / grid-section grid-content">
+        <h2 className="title-section">Just Arrived</h2>
+        <div className="page__section-content">
+          <ProductTiles products={products?.slice(5, 8)} />
+        </div>
+      </section>
 
       <section className="page__section / grid-section">
         <BannerText
@@ -100,14 +95,12 @@ function Page(props: Props) {
         />
       </section>
 
-      {haveProducts && (
-        <section className="page__section page__section-shelf / grid-section">
-          <h2 className="title-section / grid-content">Deals & Promotions</h2>
-          <div className="page__section-content">
-            <ProductShelf products={products.slice(9, 14)} />
-          </div>
-        </section>
-      )}
+      <section className="page__section page__section-shelf / grid-section">
+        <h2 className="title-section / grid-content">Deals & Promotions</h2>
+        <div className="page__section-content">
+          <ProductShelf products={products?.slice(9, 14)} />
+        </div>
+      </section>
     </>
   )
 }

From 65b29fc7b7b5e514eec472776a1569326bf344e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Feij=C3=B3?= <lucas.portela@vtex.com.br>
Date: Wed, 9 Feb 2022 16:51:08 -0300
Subject: [PATCH 09/42] Minor css fixes

---
 .../skeletons/ElementSkeleton/element-skeleton.scss         | 2 +-
 .../skeletons/FilterSkeleton/filter-skeleton.scss           | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/skeletons/ElementSkeleton/element-skeleton.scss b/src/components/skeletons/ElementSkeleton/element-skeleton.scss
index d5d092f8f..55eb24e84 100644
--- a/src/components/skeletons/ElementSkeleton/element-skeleton.scss
+++ b/src/components/skeletons/ElementSkeleton/element-skeleton.scss
@@ -16,7 +16,7 @@
 
     &[data-element-variant="button"] {
       width: var(--space-13);
-      min-height: var(--tap-min-size);
+      min-height: var(--space-5);
       column-gap: var(--space-2);
       border-radius: var(--border-radius-button);
     }
diff --git a/src/components/skeletons/FilterSkeleton/filter-skeleton.scss b/src/components/skeletons/FilterSkeleton/filter-skeleton.scss
index ea1f47861..6f675ded6 100644
--- a/src/components/skeletons/FilterSkeleton/filter-skeleton.scss
+++ b/src/components/skeletons/FilterSkeleton/filter-skeleton.scss
@@ -1,9 +1,9 @@
 @import "../../../styles/vendors/include-media";
 
 [data-store-filter-skeleton] {
-  @include media("<notebook") {
-    display: none;
-  }
+  margin-top: var(--space-1);
+
+  @include media("<notebook") { display: none; }
 
   [data-filter-skeleton-content] {
     position: relative;

From fddc872642155ba91f5411d927ed41409d8dd116 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Feij=C3=B3?= <lucas.portela@vtex.com.br>
Date: Thu, 10 Feb 2022 01:01:13 -0300
Subject: [PATCH 10/42] Adjust styles for sections' product cards

---
 .../sections/ProductShelf/ProductShelf.tsx    | 10 ++++-----
 .../ProductCardSkeleton.tsx                   |  4 +++-
 .../product-card-skeleton.scss                | 22 ++++++++++++++-----
 3 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/components/sections/ProductShelf/ProductShelf.tsx b/src/components/sections/ProductShelf/ProductShelf.tsx
index abfc272bd..db910833e 100644
--- a/src/components/sections/ProductShelf/ProductShelf.tsx
+++ b/src/components/sections/ProductShelf/ProductShelf.tsx
@@ -7,11 +7,11 @@ import ProductCard from '../../product/ProductCard'
 import './product-shelf.scss'
 
 const SKELETON_PRODUCTS: Readonly<JSX.Element[]> = [
-  <ProductCardSkeleton key="0" />,
-  <ProductCardSkeleton key="1" />,
-  <ProductCardSkeleton key="2" />,
-  <ProductCardSkeleton key="3" />,
-  <ProductCardSkeleton key="4" />,
+  <ProductCardSkeleton key="0" sectioned />,
+  <ProductCardSkeleton key="1" sectioned />,
+  <ProductCardSkeleton key="2" sectioned />,
+  <ProductCardSkeleton key="3" sectioned />,
+  <ProductCardSkeleton key="4" sectioned />,
 ]
 
 interface ProductShelfProps {
diff --git a/src/components/skeletons/ProductCardSkeleton/ProductCardSkeleton.tsx b/src/components/skeletons/ProductCardSkeleton/ProductCardSkeleton.tsx
index f80bbf2b3..f73dc0006 100644
--- a/src/components/skeletons/ProductCardSkeleton/ProductCardSkeleton.tsx
+++ b/src/components/skeletons/ProductCardSkeleton/ProductCardSkeleton.tsx
@@ -6,12 +6,14 @@ import './product-card-skeleton.scss'
 
 interface Props {
   bordered?: boolean
+  sectioned?: boolean
   showActions?: boolean
   variant?: 'vertical' | 'horizontal'
 }
 
 const ProductCardSkeleton = ({
   bordered,
+  sectioned = false,
   showActions = false,
   variant = 'vertical',
 }: Props) => {
@@ -21,7 +23,7 @@ const ProductCardSkeleton = ({
       data-bordered={bordered}
       data-variant={variant}
     >
-      <div>
+      <div data-product-card-skeleton-image data-sectioned={sectioned}>
         <ElementSkeleton type="image" />
       </div>
       <div data-product-card-skeleton-content>
diff --git a/src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss b/src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss
index ad09fb5a1..de305fbe0 100644
--- a/src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss
+++ b/src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss
@@ -4,6 +4,7 @@
   position: relative;
   display: flex;
   flex-direction: column;
+  min-width: 14vw;
   height: 100%;
   padding: var(--space-1) var(--space-1) var(--space-2);
   overflow: hidden;
@@ -24,13 +25,22 @@
     }
   }
 
-  [data-element-variant="image"] {
-    min-width: 100%;
-    min-height: 45vw;
+  [data-product-card-skeleton-image] {
+    [data-element-variant="image"] {
+      height: 45vw;
 
-    @include media(">=notebook") {
-      height: 190px;
-      min-height: unset;
+      @include media(">=notebook") {
+        height: 195px;
+      }
+    }
+
+    &[data-sectioned="true"] {
+      [data-element-variant="image"] {
+        min-width: 13rem;
+        height: 195px;
+
+        @include media(">=notebook") { height: 195px; }
+      }
     }
   }
 

From ee50f19f31873c45fa3dde189e6f448acf93b477 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Feij=C3=B3?= <lucas.portela@vtex.com.br>
Date: Thu, 10 Feb 2022 01:39:50 -0300
Subject: [PATCH 11/42] Fix PLP test

---
 cypress/integration/plp.test.js | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/cypress/integration/plp.test.js b/cypress/integration/plp.test.js
index e5029902f..1838713ef 100644
--- a/cypress/integration/plp.test.js
+++ b/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)
+                  )
+                })
             })
           })
       })

From 679c98cd5a8f0c3e42a4ffc0a3f0578f267fe8eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Feij=C3=B3?= <lucas.portela@vtex.com.br>
Date: Thu, 10 Feb 2022 02:08:32 -0300
Subject: [PATCH 12/42] Trigger CI with an empty commit


From d43c3c18c518fc5ec11a95fdf7ec355a89af77b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Feij=C3=B3?= <lucas.portela@vtex.com.br>
Date: Thu, 10 Feb 2022 11:39:11 -0300
Subject: [PATCH 13/42] Fix product card skeleton width for desktop version

---
 .../skeletons/ProductCardSkeleton/product-card-skeleton.scss    | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss b/src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss
index de305fbe0..f1fcbbeae 100644
--- a/src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss
+++ b/src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss
@@ -11,6 +11,8 @@
   border: 1px solid transparent;
   border-radius: var(--border-radius-default);
 
+  @include media(">=notebook") { min-width: 12rem; }
+
   &[data-bordered="true"] { border: 1px solid var(--color-border-display); }
 
   &[data-variant="vertical"] {

From 9fb05e50676a42654200d18d047773fe71f08c0a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Feij=C3=B3?= <lucas.portela@vtex.com.br>
Date: Thu, 10 Feb 2022 15:29:52 -0300
Subject: [PATCH 14/42] Add `ITEMS_PER_SECTION`constant

---
 src/constants.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/constants.ts b/src/constants.ts
index c083bca92..139f1c081 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1 +1,2 @@
 export const ITEMS_PER_PAGE = 12
+export const ITEMS_PER_SECTION = 5

From 739f04505577d31f48a421aa9b9dabfa42a69d52 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Feij=C3=B3?= <lucas.portela@vtex.com.br>
Date: Thu, 10 Feb 2022 15:33:17 -0300
Subject: [PATCH 15/42] Refactor skeleton products array (using of Array's
 `from` method)

---
 .../product/ProductGrid/ProductGrid.tsx       | 22 +++++--------------
 .../sections/ProductShelf/ProductShelf.tsx    | 21 +++++++-----------
 .../sections/ProductTiles/ProductTiles.tsx    |  6 -----
 3 files changed, 13 insertions(+), 36 deletions(-)

diff --git a/src/components/product/ProductGrid/ProductGrid.tsx b/src/components/product/ProductGrid/ProductGrid.tsx
index 1578b0b99..d4b3095a8 100644
--- a/src/components/product/ProductGrid/ProductGrid.tsx
+++ b/src/components/product/ProductGrid/ProductGrid.tsx
@@ -1,25 +1,11 @@
 import React from 'react'
 import type { ProductSummary_ProductFragment } from '@generated/graphql'
+import { ITEMS_PER_PAGE } from 'src/constants'
 import ProductCardSkeleton from 'src/components/skeletons/ProductCardSkeleton'
 
 import ProductCard from '../ProductCard'
 import './product-grid.scss'
 
-const SKELETON_PRODUCTS: Readonly<JSX.Element[]> = [
-  <ProductCardSkeleton bordered key="0" />,
-  <ProductCardSkeleton bordered key="1" />,
-  <ProductCardSkeleton bordered key="2" />,
-  <ProductCardSkeleton bordered key="3" />,
-  <ProductCardSkeleton bordered key="4" />,
-  <ProductCardSkeleton bordered key="5" />,
-  <ProductCardSkeleton bordered key="6" />,
-  <ProductCardSkeleton bordered key="7" />,
-  <ProductCardSkeleton bordered key="8" />,
-  <ProductCardSkeleton bordered key="9" />,
-  <ProductCardSkeleton bordered key="10" />,
-  <ProductCardSkeleton bordered key="11" />,
-]
-
 interface Props {
   products: ProductSummary_ProductFragment[]
   page: number
@@ -45,8 +31,10 @@ function ProductGrid({ products, page, pageSize }: Props) {
               />
             </li>
           ))
-        : SKELETON_PRODUCTS.map((skeleton, index) => (
-            <li key={String(index)}>{skeleton}</li>
+        : Array.from({ length: ITEMS_PER_PAGE }, (_, index) => (
+            <li key={String(index)}>
+              <ProductCardSkeleton bordered />
+            </li>
           ))}
     </ul>
   )
diff --git a/src/components/sections/ProductShelf/ProductShelf.tsx b/src/components/sections/ProductShelf/ProductShelf.tsx
index db910833e..f11dd1d45 100644
--- a/src/components/sections/ProductShelf/ProductShelf.tsx
+++ b/src/components/sections/ProductShelf/ProductShelf.tsx
@@ -1,19 +1,12 @@
 import React from 'react'
 import type { ProductSummary_ProductFragment } from '@generated/graphql'
+import { ITEMS_PER_SECTION } from 'src/constants'
 import ProductCardSkeleton from 'src/components/skeletons/ProductCardSkeleton'
 
 import ProductCard from '../../product/ProductCard'
 
 import './product-shelf.scss'
 
-const SKELETON_PRODUCTS: Readonly<JSX.Element[]> = [
-  <ProductCardSkeleton key="0" sectioned />,
-  <ProductCardSkeleton key="1" sectioned />,
-  <ProductCardSkeleton key="2" sectioned />,
-  <ProductCardSkeleton key="3" sectioned />,
-  <ProductCardSkeleton key="4" sectioned />,
-]
-
 interface ProductShelfProps {
   products: ProductSummary_ProductFragment[]
 }
@@ -23,14 +16,16 @@ function ProductShelf({ products }: ProductShelfProps) {
 
   return (
     <ul data-product-shelf className="grid-content">
-      {!haveProducts
-        ? SKELETON_PRODUCTS.map((skeleton, index) => (
-            <li key={String(index)}>{skeleton}</li>
-          ))
-        : products.map((product, idx) => (
+      {haveProducts
+        ? products.map((product, idx) => (
             <li key={`${product.id}`}>
               <ProductCard product={product} index={idx + 1} />
             </li>
+          ))
+        : Array.from({ length: ITEMS_PER_SECTION }, (_, index) => (
+            <li key={String(index)}>
+              <ProductCardSkeleton sectioned />
+            </li>
           ))}
     </ul>
   )
diff --git a/src/components/sections/ProductTiles/ProductTiles.tsx b/src/components/sections/ProductTiles/ProductTiles.tsx
index 69d8d8418..884340d86 100644
--- a/src/components/sections/ProductTiles/ProductTiles.tsx
+++ b/src/components/sections/ProductTiles/ProductTiles.tsx
@@ -4,12 +4,6 @@ import ProductCard from 'src/components/product/ProductCard'
 import type { ProductSummary_ProductFragment } from '@generated/graphql'
 import ProductTileSkeleton from 'src/components/skeletons/ProductTileSkeleton'
 
-const SKELETON_PRODUCTS: Readonly<JSX.Element[]> = [
-  <ProductTileSkeleton key="0" tileIndex={1} variant="horizontal" />,
-  <ProductTileSkeleton key="1" tileIndex={2} variant="horizontal" />,
-  <ProductTileSkeleton key="2" tileIndex={3} variant="horizontal" />,
-]
-
 interface TilesProps {
   products: ProductSummary_ProductFragment[]
 }

From 60c284ad7e5802bf9d010d61162d43087d0132d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Feij=C3=B3?= <lucas.portela@vtex.com.br>
Date: Thu, 10 Feb 2022 15:35:01 -0300
Subject: [PATCH 16/42] Fix lint warnings and give a better description for how
 the shimmer effect must be applied

---
 src/components/skeletons/Shimmer/shimmer.scss | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/skeletons/Shimmer/shimmer.scss b/src/components/skeletons/Shimmer/shimmer.scss
index 0d2b27edc..c96a6bec3 100644
--- a/src/components/skeletons/Shimmer/shimmer.scss
+++ b/src/components/skeletons/Shimmer/shimmer.scss
@@ -1,7 +1,9 @@
 [data-store-shimmer] {
-  /* parent: position relative & overflow hidden */
+  /*
+   * Parent must have `position: relative` and `overflow: hidden`
+   * in order to the effect to work properly.
+   */
   position: absolute;
-
   top: 0;
   left: 0;
   width: 100%;
@@ -12,8 +14,8 @@
     width: 50%;
     height: 100%;
     background: rgb(255 255 255 / 20%);
-    transform: skewX(-20deg);
     box-shadow: 0 0 var(--space-5) var(--space-5) rgb(255 255 255 / 20%);
+    transform: skewX(-20deg);
   }
 }
 

From 0d67095aecfa03b3d2422c80c358b88b4f07f8a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Feij=C3=B3?= <lucas.portela@vtex.com.br>
Date: Thu, 10 Feb 2022 15:37:39 -0300
Subject: [PATCH 17/42] CSS fixes

---
 .../sections/ProductGallery/product-gallery.scss   |  4 ++--
 .../ElementSkeleton/element-skeleton.scss          |  2 +-
 .../skeletons/FilterSkeleton/filter-skeleton.scss  |  6 +++---
 .../ProductCardSkeleton/product-card-skeleton.scss | 14 ++++++--------
 4 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/components/sections/ProductGallery/product-gallery.scss b/src/components/sections/ProductGallery/product-gallery.scss
index fae2d3546..35879d5d8 100644
--- a/src/components/sections/ProductGallery/product-gallery.scss
+++ b/src/components/sections/ProductGallery/product-gallery.scss
@@ -63,7 +63,7 @@
   background-color: var(--bg-neutral-lightest);
 
   [data-element-variant="text"] {
-    min-width: 225px;
+    min-width: rem(225px);
     min-height: var(--space-5);
   }
 
@@ -99,7 +99,7 @@
   }
 
   [data-element-variant="text"] {
-    min-width: 130px;
+    min-width: rem(130px);
   }
 }
 
diff --git a/src/components/skeletons/ElementSkeleton/element-skeleton.scss b/src/components/skeletons/ElementSkeleton/element-skeleton.scss
index 55eb24e84..997f60513 100644
--- a/src/components/skeletons/ElementSkeleton/element-skeleton.scss
+++ b/src/components/skeletons/ElementSkeleton/element-skeleton.scss
@@ -27,7 +27,7 @@
 
     &[data-element-variant="badge"] {
       width: 40%;
-      height: 30px;
+      height: var(--space-5);
       border-radius: var(--border-radius-pill);
     }
   }
diff --git a/src/components/skeletons/FilterSkeleton/filter-skeleton.scss b/src/components/skeletons/FilterSkeleton/filter-skeleton.scss
index 6f675ded6..5dfed0c33 100644
--- a/src/components/skeletons/FilterSkeleton/filter-skeleton.scss
+++ b/src/components/skeletons/FilterSkeleton/filter-skeleton.scss
@@ -1,4 +1,4 @@
-@import "../../../styles/vendors/include-media";
+@import "../../../styles/scaffold";
 
 [data-store-filter-skeleton] {
   margin-top: var(--space-1);
@@ -11,12 +11,12 @@
     flex-direction: column;
     padding: var(--space-1) var(--space-1) var(--space-0);
     overflow: hidden;
-    border: 1px solid var(--color-border-display);
+    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: 60px;
+      min-height: var(--space-8);
       margin-bottom: var(--space-0);
     }
   }
diff --git a/src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss b/src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss
index f1fcbbeae..ee9374150 100644
--- a/src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss
+++ b/src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss
@@ -1,4 +1,4 @@
-@import "../../../styles/vendors/include-media.scss";
+@import "../../../styles/scaffold";
 
 [data-store-product-card-skeleton] {
   position: relative;
@@ -8,12 +8,12 @@
   height: 100%;
   padding: var(--space-1) var(--space-1) var(--space-2);
   overflow: hidden;
-  border: 1px solid transparent;
+  border: var(--border-width-0) solid transparent;
   border-radius: var(--border-radius-default);
 
   @include media(">=notebook") { min-width: 12rem; }
 
-  &[data-bordered="true"] { border: 1px solid var(--color-border-display); }
+  &[data-bordered="true"] { border: var(--border-width-0) solid var(--color-border-display); }
 
   &[data-variant="vertical"] {
     [data-card-content] { padding-top: var(--space-2); }
@@ -32,16 +32,14 @@
       height: 45vw;
 
       @include media(">=notebook") {
-        height: 195px;
+        height: rem(195px);
       }
     }
 
     &[data-sectioned="true"] {
       [data-element-variant="image"] {
         min-width: 13rem;
-        height: 195px;
-
-        @include media(">=notebook") { height: 195px; }
+        height: rem(195px);
       }
     }
   }
@@ -59,7 +57,7 @@
       min-width: 30%;
 
       @include media(">=notebook") {
-        min-height: 30px;
+        min-height: var(--space-5);
         margin-top: var(--space-4);
       }
 

From c74e09d45cafe78c611250d4b64541ca00788db7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Feij=C3=B3?= <lucas.portela@vtex.com.br>
Date: Thu, 10 Feb 2022 16:05:31 -0300
Subject: [PATCH 18/42] Fix white transparent variable value

---
 src/components/skeletons/Shimmer/shimmer.scss | 4 ++--
 src/styles/colors.scss                        | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/skeletons/Shimmer/shimmer.scss b/src/components/skeletons/Shimmer/shimmer.scss
index c96a6bec3..a0aebeebd 100644
--- a/src/components/skeletons/Shimmer/shimmer.scss
+++ b/src/components/skeletons/Shimmer/shimmer.scss
@@ -13,8 +13,8 @@
   [data-shimmer] {
     width: 50%;
     height: 100%;
-    background: rgb(255 255 255 / 20%);
-    box-shadow: 0 0 var(--space-5) var(--space-5) rgb(255 255 255 / 20%);
+    background: var(--color-white-transparent-20);
+    box-shadow: 0 0 var(--space-5) var(--space-5) var(--color-white-transparent-20);
     transform: skewX(-20deg);
   }
 }
diff --git a/src/styles/colors.scss b/src/styles/colors.scss
index da795711e..89ca59480 100644
--- a/src/styles/colors.scss
+++ b/src/styles/colors.scss
@@ -8,8 +8,8 @@
   --color-black-transparent-5: rgb(0 0 0 / 5%);
   --color-black-transparent-10: rgb(0 0 0 / 10%);
   --color-black-transparent-20: rgb(0 0 0 / 20%);
-  --color-white-transparent-10: rgb(0 0 0 / 10%);
-  --color-white-transparent-20: rgb(0 0 0 / 20%);
+  --color-white-transparent-10: rgb(255 255 255 / 10%);
+  --color-white-transparent-20: rgb(255 255 255 / 20%);
 
   // Text
   --color-link: var(--color-secondary-2);

From 8d1fc639e37043b6ceb5e7031ba8cfcbdaa31e99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Feij=C3=B3?= <lucas.portela@vtex.com.br>
Date: Thu, 10 Feb 2022 17:00:58 -0300
Subject: [PATCH 19/42] Rename skeleton components

---
 .../product/ProductGrid/ProductGrid.tsx       |  4 +-
 .../sections/ProductShelf/ProductShelf.tsx    |  4 +-
 .../sections/ProductTiles/ProductTiles.tsx    |  2 +-
 .../ElementSkeleton/ElementSkeleton.tsx       | 23 ----------
 .../skeletons/ElementSkeleton/index.ts        |  1 -
 .../FilterSkeleton/FilterSkeleton.tsx         | 22 ---------
 .../skeletons/FilterSkeleton/index.ts         |  1 -
 .../ProductCardSkeleton.tsx                   | 40 -----------------
 .../skeletons/ProductCardSkeleton/index.ts    |  1 -
 .../ProductTileSkeleton.tsx                   | 45 -------------------
 .../skeletons/ProductTileSkeleton/index.ts    |  1 -
 .../SkeletonElement/SkeletonElement.tsx       | 23 ++++++++++
 .../skeletons/SkeletonElement/index.ts        |  1 +
 .../skeleton-element.scss}                    |  4 +-
 .../SkeletonFilter/SkeletonFilter.tsx         | 22 +++++++++
 .../skeletons/SkeletonFilter/index.ts         |  1 +
 .../skeleton-filter.scss}                     |  4 +-
 .../SkeletonProductCard.tsx                   | 40 +++++++++++++++++
 .../skeletons/SkeletonProductCard/index.ts    |  1 +
 .../skeleton-product-card.scss}               |  6 +--
 .../SkeletonProductTile.tsx                   | 45 +++++++++++++++++++
 .../skeletons/SkeletonProductTile/index.ts    |  1 +
 .../skeleton-product-tile.scss}               | 16 +++----
 23 files changed, 154 insertions(+), 154 deletions(-)
 delete mode 100644 src/components/skeletons/ElementSkeleton/ElementSkeleton.tsx
 delete mode 100644 src/components/skeletons/ElementSkeleton/index.ts
 delete mode 100644 src/components/skeletons/FilterSkeleton/FilterSkeleton.tsx
 delete mode 100644 src/components/skeletons/FilterSkeleton/index.ts
 delete mode 100644 src/components/skeletons/ProductCardSkeleton/ProductCardSkeleton.tsx
 delete mode 100644 src/components/skeletons/ProductCardSkeleton/index.ts
 delete mode 100644 src/components/skeletons/ProductTileSkeleton/ProductTileSkeleton.tsx
 delete mode 100644 src/components/skeletons/ProductTileSkeleton/index.ts
 create mode 100644 src/components/skeletons/SkeletonElement/SkeletonElement.tsx
 create mode 100644 src/components/skeletons/SkeletonElement/index.ts
 rename src/components/skeletons/{ElementSkeleton/element-skeleton.scss => SkeletonElement/skeleton-element.scss} (91%)
 create mode 100644 src/components/skeletons/SkeletonFilter/SkeletonFilter.tsx
 create mode 100644 src/components/skeletons/SkeletonFilter/index.ts
 rename src/components/skeletons/{FilterSkeleton/filter-skeleton.scss => SkeletonFilter/skeleton-filter.scss} (90%)
 create mode 100644 src/components/skeletons/SkeletonProductCard/SkeletonProductCard.tsx
 create mode 100644 src/components/skeletons/SkeletonProductCard/index.ts
 rename src/components/skeletons/{ProductCardSkeleton/product-card-skeleton.scss => SkeletonProductCard/skeleton-product-card.scss} (92%)
 create mode 100644 src/components/skeletons/SkeletonProductTile/SkeletonProductTile.tsx
 create mode 100644 src/components/skeletons/SkeletonProductTile/index.ts
 rename src/components/skeletons/{ProductTileSkeleton/product-tile-skeleton.scss => SkeletonProductTile/skeleton-product-tile.scss} (90%)

diff --git a/src/components/product/ProductGrid/ProductGrid.tsx b/src/components/product/ProductGrid/ProductGrid.tsx
index d4b3095a8..a668f2326 100644
--- a/src/components/product/ProductGrid/ProductGrid.tsx
+++ b/src/components/product/ProductGrid/ProductGrid.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import type { ProductSummary_ProductFragment } from '@generated/graphql'
 import { ITEMS_PER_PAGE } from 'src/constants'
-import ProductCardSkeleton from 'src/components/skeletons/ProductCardSkeleton'
+import SkeletonProductCard from 'src/components/skeletons/SkeletonProductCard'
 
 import ProductCard from '../ProductCard'
 import './product-grid.scss'
@@ -33,7 +33,7 @@ function ProductGrid({ products, page, pageSize }: Props) {
           ))
         : Array.from({ length: ITEMS_PER_PAGE }, (_, index) => (
             <li key={String(index)}>
-              <ProductCardSkeleton bordered />
+              <SkeletonProductCard bordered />
             </li>
           ))}
     </ul>
diff --git a/src/components/sections/ProductShelf/ProductShelf.tsx b/src/components/sections/ProductShelf/ProductShelf.tsx
index f11dd1d45..4f3e252c3 100644
--- a/src/components/sections/ProductShelf/ProductShelf.tsx
+++ b/src/components/sections/ProductShelf/ProductShelf.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import type { ProductSummary_ProductFragment } from '@generated/graphql'
 import { ITEMS_PER_SECTION } from 'src/constants'
-import ProductCardSkeleton from 'src/components/skeletons/ProductCardSkeleton'
+import SkeletonProductCard from 'src/components/skeletons/SkeletonProductCard'
 
 import ProductCard from '../../product/ProductCard'
 
@@ -24,7 +24,7 @@ function ProductShelf({ products }: ProductShelfProps) {
           ))
         : Array.from({ length: ITEMS_PER_SECTION }, (_, index) => (
             <li key={String(index)}>
-              <ProductCardSkeleton sectioned />
+              <SkeletonProductCard sectioned />
             </li>
           ))}
     </ul>
diff --git a/src/components/sections/ProductTiles/ProductTiles.tsx b/src/components/sections/ProductTiles/ProductTiles.tsx
index 884340d86..4bb7bb42e 100644
--- a/src/components/sections/ProductTiles/ProductTiles.tsx
+++ b/src/components/sections/ProductTiles/ProductTiles.tsx
@@ -2,7 +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 ProductTileSkeleton from 'src/components/skeletons/ProductTileSkeleton'
+import SkeletonProductTile from 'src/components/skeletons/SkeletonProductTile'
 
 interface TilesProps {
   products: ProductSummary_ProductFragment[]
diff --git a/src/components/skeletons/ElementSkeleton/ElementSkeleton.tsx b/src/components/skeletons/ElementSkeleton/ElementSkeleton.tsx
deleted file mode 100644
index 10f4e992a..000000000
--- a/src/components/skeletons/ElementSkeleton/ElementSkeleton.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react'
-
-import Shimmer from '../Shimmer'
-
-import './element-skeleton.scss'
-
-type ElementVariant = 'text' | 'button' | 'image' | 'badge'
-
-interface Props {
-  shimmer?: boolean
-  type: ElementVariant
-}
-
-function ElementSkeleton({ type, shimmer = false }: Props) {
-  return (
-    <div data-store-element-skeleton data-shimmer={shimmer}>
-      <div data-element-skeleton data-element-variant={type} />
-      {shimmer && <Shimmer />}
-    </div>
-  )
-}
-
-export default ElementSkeleton
diff --git a/src/components/skeletons/ElementSkeleton/index.ts b/src/components/skeletons/ElementSkeleton/index.ts
deleted file mode 100644
index 1670135e4..000000000
--- a/src/components/skeletons/ElementSkeleton/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './ElementSkeleton'
diff --git a/src/components/skeletons/FilterSkeleton/FilterSkeleton.tsx b/src/components/skeletons/FilterSkeleton/FilterSkeleton.tsx
deleted file mode 100644
index 92dc6645a..000000000
--- a/src/components/skeletons/FilterSkeleton/FilterSkeleton.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react'
-
-import Shimmer from '../Shimmer'
-import ElementSkeleton from '../ElementSkeleton'
-import './filter-skeleton.scss'
-
-function FilterSkeleton() {
-  return (
-    <div data-store-filter-skeleton>
-      <ElementSkeleton shimmer type="text" />
-
-      <div data-filter-skeleton-content>
-        <ElementSkeleton type="text" />
-        <ElementSkeleton type="text" />
-        <ElementSkeleton type="text" />
-        <Shimmer />
-      </div>
-    </div>
-  )
-}
-
-export default FilterSkeleton
diff --git a/src/components/skeletons/FilterSkeleton/index.ts b/src/components/skeletons/FilterSkeleton/index.ts
deleted file mode 100644
index 3224f597c..000000000
--- a/src/components/skeletons/FilterSkeleton/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './FilterSkeleton'
diff --git a/src/components/skeletons/ProductCardSkeleton/ProductCardSkeleton.tsx b/src/components/skeletons/ProductCardSkeleton/ProductCardSkeleton.tsx
deleted file mode 100644
index f73dc0006..000000000
--- a/src/components/skeletons/ProductCardSkeleton/ProductCardSkeleton.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react'
-
-import Shimmer from '../Shimmer'
-import ElementSkeleton from '../ElementSkeleton'
-import './product-card-skeleton.scss'
-
-interface Props {
-  bordered?: boolean
-  sectioned?: boolean
-  showActions?: boolean
-  variant?: 'vertical' | 'horizontal'
-}
-
-const ProductCardSkeleton = ({
-  bordered,
-  sectioned = false,
-  showActions = false,
-  variant = 'vertical',
-}: Props) => {
-  return (
-    <div
-      data-store-product-card-skeleton
-      data-bordered={bordered}
-      data-variant={variant}
-    >
-      <div data-product-card-skeleton-image data-sectioned={sectioned}>
-        <ElementSkeleton type="image" />
-      </div>
-      <div data-product-card-skeleton-content>
-        <ElementSkeleton type="text" />
-        <ElementSkeleton type="text" />
-        <ElementSkeleton type="badge" />
-        {showActions && <ElementSkeleton type="button" />}
-      </div>
-      <Shimmer />
-    </div>
-  )
-}
-
-export default ProductCardSkeleton
diff --git a/src/components/skeletons/ProductCardSkeleton/index.ts b/src/components/skeletons/ProductCardSkeleton/index.ts
deleted file mode 100644
index 852a53006..000000000
--- a/src/components/skeletons/ProductCardSkeleton/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './ProductCardSkeleton'
diff --git a/src/components/skeletons/ProductTileSkeleton/ProductTileSkeleton.tsx b/src/components/skeletons/ProductTileSkeleton/ProductTileSkeleton.tsx
deleted file mode 100644
index 4d40166e9..000000000
--- a/src/components/skeletons/ProductTileSkeleton/ProductTileSkeleton.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react'
-
-import Shimmer from '../Shimmer'
-import ElementSkeleton from '../ElementSkeleton'
-import './product-tile-skeleton.scss'
-
-interface Props {
-  tileIndex: number
-  bordered?: boolean
-  variant?: 'vertical' | 'horizontal'
-}
-
-const ProductTileSkeleton = ({
-  tileIndex,
-  bordered,
-  variant = 'vertical',
-}: Props) => {
-  return (
-    <div
-      data-store-product-tile-skeleton
-      data-tile-index={tileIndex}
-      data-bordered={bordered}
-      data-variant={variant}
-    >
-      <div data-product-tile-skeleton-image data-tile-index={tileIndex}>
-        <ElementSkeleton type="image" />
-      </div>
-      <div data-product-tile-skeleton-content data-tile-index={tileIndex}>
-        <div data-product-tile-skeleton-text data-tile-index={tileIndex}>
-          <ElementSkeleton type="text" />
-          <div data-product-tile-skeleton-price>
-            <ElementSkeleton type="text" data-product-tile-skeleton-price />
-          </div>
-        </div>
-
-        <div data-product-tile-skeleton-badge data-tile-index={tileIndex}>
-          <ElementSkeleton type="badge" />
-        </div>
-      </div>
-      <Shimmer />
-    </div>
-  )
-}
-
-export default ProductTileSkeleton
diff --git a/src/components/skeletons/ProductTileSkeleton/index.ts b/src/components/skeletons/ProductTileSkeleton/index.ts
deleted file mode 100644
index 6c876886c..000000000
--- a/src/components/skeletons/ProductTileSkeleton/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './ProductTileSkeleton'
diff --git a/src/components/skeletons/SkeletonElement/SkeletonElement.tsx b/src/components/skeletons/SkeletonElement/SkeletonElement.tsx
new file mode 100644
index 000000000..0de27100e
--- /dev/null
+++ b/src/components/skeletons/SkeletonElement/SkeletonElement.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+import Shimmer from '../Shimmer'
+
+import './skeleton-element.scss'
+
+type ElementVariant = 'text' | 'button' | 'image' | 'badge'
+
+interface Props {
+  shimmer?: boolean
+  type: ElementVariant
+}
+
+function SkeletonElement({ type, shimmer = false }: Props) {
+  return (
+    <div data-store-skeleton-element data-shimmer={shimmer}>
+      <div data-skeleton-element-content data-element-variant={type} />
+      {shimmer && <Shimmer />}
+    </div>
+  )
+}
+
+export default SkeletonElement
diff --git a/src/components/skeletons/SkeletonElement/index.ts b/src/components/skeletons/SkeletonElement/index.ts
new file mode 100644
index 000000000..762fcb8f3
--- /dev/null
+++ b/src/components/skeletons/SkeletonElement/index.ts
@@ -0,0 +1 @@
+export { default } from './SkeletonElement'
diff --git a/src/components/skeletons/ElementSkeleton/element-skeleton.scss b/src/components/skeletons/SkeletonElement/skeleton-element.scss
similarity index 91%
rename from src/components/skeletons/ElementSkeleton/element-skeleton.scss
rename to src/components/skeletons/SkeletonElement/skeleton-element.scss
index 997f60513..6053003a3 100644
--- a/src/components/skeletons/ElementSkeleton/element-skeleton.scss
+++ b/src/components/skeletons/SkeletonElement/skeleton-element.scss
@@ -1,10 +1,10 @@
-[data-store-element-skeleton] {
+[data-store-skeleton-element] {
   &[data-shimmer="true"] {
     position: relative;
     overflow: hidden;
   }
 
-  [data-element-skeleton] {
+  [data-skeleton-element-content] {
     overflow: hidden;
     background: var(--color-neutral-2);
     border-radius: var(--border-radius-default);
diff --git a/src/components/skeletons/SkeletonFilter/SkeletonFilter.tsx b/src/components/skeletons/SkeletonFilter/SkeletonFilter.tsx
new file mode 100644
index 000000000..9a68f6c96
--- /dev/null
+++ b/src/components/skeletons/SkeletonFilter/SkeletonFilter.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+
+import Shimmer from '../Shimmer'
+import SkeletonElement from '../SkeletonElement'
+import './skeleton-filter.scss'
+
+function SkeletonFilter() {
+  return (
+    <div data-store-skeleton-filter>
+      <SkeletonElement shimmer type="text" />
+
+      <div data-skeleton-filter-content>
+        <SkeletonElement type="text" />
+        <SkeletonElement type="text" />
+        <SkeletonElement type="text" />
+        <Shimmer />
+      </div>
+    </div>
+  )
+}
+
+export default SkeletonFilter
diff --git a/src/components/skeletons/SkeletonFilter/index.ts b/src/components/skeletons/SkeletonFilter/index.ts
new file mode 100644
index 000000000..19687646f
--- /dev/null
+++ b/src/components/skeletons/SkeletonFilter/index.ts
@@ -0,0 +1 @@
+export { default } from './SkeletonFilter'
diff --git a/src/components/skeletons/FilterSkeleton/filter-skeleton.scss b/src/components/skeletons/SkeletonFilter/skeleton-filter.scss
similarity index 90%
rename from src/components/skeletons/FilterSkeleton/filter-skeleton.scss
rename to src/components/skeletons/SkeletonFilter/skeleton-filter.scss
index 5dfed0c33..c91ac0e20 100644
--- a/src/components/skeletons/FilterSkeleton/filter-skeleton.scss
+++ b/src/components/skeletons/SkeletonFilter/skeleton-filter.scss
@@ -1,11 +1,11 @@
 @import "../../../styles/scaffold";
 
-[data-store-filter-skeleton] {
+[data-store-skeleton-filter] {
   margin-top: var(--space-1);
 
   @include media("<notebook") { display: none; }
 
-  [data-filter-skeleton-content] {
+  [data-skeleton-filter-content] {
     position: relative;
     display: flex;
     flex-direction: column;
diff --git a/src/components/skeletons/SkeletonProductCard/SkeletonProductCard.tsx b/src/components/skeletons/SkeletonProductCard/SkeletonProductCard.tsx
new file mode 100644
index 000000000..072db5841
--- /dev/null
+++ b/src/components/skeletons/SkeletonProductCard/SkeletonProductCard.tsx
@@ -0,0 +1,40 @@
+import React from 'react'
+
+import Shimmer from '../Shimmer'
+import SkeletonElement from '../SkeletonElement'
+import './skeleton-product-card.scss'
+
+interface Props {
+  bordered?: boolean
+  sectioned?: boolean
+  showActions?: boolean
+  variant?: 'vertical' | 'horizontal'
+}
+
+const SkeletonProductCard = ({
+  bordered,
+  sectioned = false,
+  showActions = false,
+  variant = 'vertical',
+}: Props) => {
+  return (
+    <div
+      data-store-skeleton-product-card
+      data-bordered={bordered}
+      data-variant={variant}
+    >
+      <div data-skeleton-product-card-image data-sectioned={sectioned}>
+        <SkeletonElement type="image" />
+      </div>
+      <div data-skeleton-product-card-content>
+        <SkeletonElement type="text" />
+        <SkeletonElement type="text" />
+        <SkeletonElement type="badge" />
+        {showActions && <SkeletonElement type="button" />}
+      </div>
+      <Shimmer />
+    </div>
+  )
+}
+
+export default SkeletonProductCard
diff --git a/src/components/skeletons/SkeletonProductCard/index.ts b/src/components/skeletons/SkeletonProductCard/index.ts
new file mode 100644
index 000000000..ddd9333d8
--- /dev/null
+++ b/src/components/skeletons/SkeletonProductCard/index.ts
@@ -0,0 +1 @@
+export { default } from './SkeletonProductCard'
diff --git a/src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss b/src/components/skeletons/SkeletonProductCard/skeleton-product-card.scss
similarity index 92%
rename from src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss
rename to src/components/skeletons/SkeletonProductCard/skeleton-product-card.scss
index ee9374150..06ad41ca3 100644
--- a/src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss
+++ b/src/components/skeletons/SkeletonProductCard/skeleton-product-card.scss
@@ -1,6 +1,6 @@
 @import "../../../styles/scaffold";
 
-[data-store-product-card-skeleton] {
+[data-store-skeleton-product-card] {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -27,7 +27,7 @@
     }
   }
 
-  [data-product-card-skeleton-image] {
+  [data-skeleton-product-card-image] {
     [data-element-variant="image"] {
       height: 45vw;
 
@@ -44,7 +44,7 @@
     }
   }
 
-  [data-product-card-skeleton-content] {
+  [data-skeleton-product-card-content] {
     position: relative;
     height: 20%;
     margin-top: var(--space-2);
diff --git a/src/components/skeletons/SkeletonProductTile/SkeletonProductTile.tsx b/src/components/skeletons/SkeletonProductTile/SkeletonProductTile.tsx
new file mode 100644
index 000000000..4c8828fde
--- /dev/null
+++ b/src/components/skeletons/SkeletonProductTile/SkeletonProductTile.tsx
@@ -0,0 +1,45 @@
+import React from 'react'
+
+import Shimmer from '../Shimmer'
+import SkeletonElement from '../SkeletonElement'
+import './skeleton-product-tile.scss'
+
+interface Props {
+  tileIndex: number
+  bordered?: boolean
+  variant?: 'vertical' | 'horizontal'
+}
+
+const SkeletonProductTile = ({
+  tileIndex,
+  bordered,
+  variant = 'vertical',
+}: Props) => {
+  return (
+    <div
+      data-store-skeleton-product-tile
+      data-tile-index={tileIndex}
+      data-bordered={bordered}
+      data-variant={variant}
+    >
+      <div data-skeleton-product-tile-image data-tile-index={tileIndex}>
+        <SkeletonElement type="image" />
+      </div>
+      <div data-skeleton-product-tile-content data-tile-index={tileIndex}>
+        <div data-skeleton-product-tile-text data-tile-index={tileIndex}>
+          <SkeletonElement type="text" />
+          <div data-skeleton-product-tile-price>
+            <SkeletonElement type="text" data-skeleton-product-tile-price />
+          </div>
+        </div>
+
+        <div data-skeleton-product-tile-badge data-tile-index={tileIndex}>
+          <SkeletonElement type="badge" />
+        </div>
+      </div>
+      <Shimmer />
+    </div>
+  )
+}
+
+export default SkeletonProductTile
diff --git a/src/components/skeletons/SkeletonProductTile/index.ts b/src/components/skeletons/SkeletonProductTile/index.ts
new file mode 100644
index 000000000..cfdf25f35
--- /dev/null
+++ b/src/components/skeletons/SkeletonProductTile/index.ts
@@ -0,0 +1 @@
+export { default } from './SkeletonProductTile'
diff --git a/src/components/skeletons/ProductTileSkeleton/product-tile-skeleton.scss b/src/components/skeletons/SkeletonProductTile/skeleton-product-tile.scss
similarity index 90%
rename from src/components/skeletons/ProductTileSkeleton/product-tile-skeleton.scss
rename to src/components/skeletons/SkeletonProductTile/skeleton-product-tile.scss
index edeb491eb..ba37633ee 100644
--- a/src/components/skeletons/ProductTileSkeleton/product-tile-skeleton.scss
+++ b/src/components/skeletons/SkeletonProductTile/skeleton-product-tile.scss
@@ -1,6 +1,6 @@
 @import "../../../styles/vendors/include-media.scss";
 
-[data-store-product-tile-skeleton] {
+[data-store-skeleton-product-tile] {
   position: relative;
   width: 100%;
   min-width: 100%;
@@ -17,7 +17,7 @@
   }
 
   &[data-variant="horizontal"] {
-    [data-product-tile-skeleton-content] {
+    [data-skeleton-product-tile-content] {
       background-color: var(--bg-neutral-light);
 
       @include media(">=tablet") {
@@ -26,7 +26,7 @@
     }
   }
 
-  [data-product-tile-skeleton-image] {
+  [data-skeleton-product-tile-image] {
     height: 60%;
     min-height: 60%;
     border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;
@@ -55,7 +55,7 @@
       }
     }
 
-    [data-store-element-skeleton] { height: 100%; }
+    [data-store-skeleton-element] { height: 100%; }
 
     [data-element-variant="image"] {
       width: 100%;
@@ -65,7 +65,7 @@
     }
   }
 
-  [data-product-tile-skeleton-content] {
+  [data-skeleton-product-tile-content] {
     display: flex;
     flex-direction: row;
     align-items: flex-start;
@@ -96,7 +96,7 @@
       @include media(">=notebook") { height: 20%; }
     }
 
-    [data-product-tile-skeleton-text] {
+    [data-skeleton-product-tile-text] {
       width: 70%;
 
       @include media(">=tablet") {
@@ -115,14 +115,14 @@
 
       [data-element-variant="text"] { margin-bottom: var(--space-1); }
 
-      [data-product-tile-skeleton-price] {
+      [data-skeleton-product-tile-price] {
         width: 60%;
 
         @include media(">=tablet") { width: 100%; }
       }
     }
 
-    [data-product-tile-skeleton-badge] {
+    [data-skeleton-product-tile-badge] {
       position: absolute;
       right: var(--space-1);
       width: 20%;

From 6ea4b3121dafad89fc353c27c78092b4fde0163b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Feij=C3=B3?= <lucas.portela@vtex.com.br>
Date: Tue, 15 Feb 2022 11:14:39 -0300
Subject: [PATCH 20/42] Apply composition in `SkeletonElement` and
 `SkeletonFilter`  components

---
 .../ProductGallery/ProductGallery.tsx         | 57 +++++++++++--------
 .../SkeletonElement/SkeletonElement.tsx       | 13 ++++-
 .../SkeletonFilter/SkeletonFilter.tsx         | 11 +++-
 3 files changed, 52 insertions(+), 29 deletions(-)

diff --git a/src/components/sections/ProductGallery/ProductGallery.tsx b/src/components/sections/ProductGallery/ProductGallery.tsx
index d132803d9..8e8c40204 100644
--- a/src/components/sections/ProductGallery/ProductGallery.tsx
+++ b/src/components/sections/ProductGallery/ProductGallery.tsx
@@ -33,35 +33,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)}
-          />
+          <SkeletonFilter loading={orderedFacets?.length === 0}>
+            <Filter
+              slug={slug}
+              isOpen={isFilterOpen}
+              facets={orderedFacets}
+              onDismiss={() => setIsFilterOpen(false)}
+            />
+          </SkeletonFilter>
         </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">
@@ -88,7 +92,7 @@ function ProductGallery({ title, slug }: Props) {
 
           {/* Render ALL products */}
           <div className="product-listing__data-grid">
-            {data &&
+            {data ? (
               pages.map((page) => (
                 <GalleryPage
                   key={`gallery-page-${page}`}
@@ -97,7 +101,10 @@ function ProductGallery({ title, slug }: Props) {
                   page={page}
                   title={title}
                 />
-              ))}
+              ))
+            ) : (
+              <ProductGrid page={0} pageSize={0} products={[]} />
+            )}
           </div>
 
           {/* Prefetch Previous and Next pages */}
diff --git a/src/components/skeletons/SkeletonElement/SkeletonElement.tsx b/src/components/skeletons/SkeletonElement/SkeletonElement.tsx
index 0de27100e..b56bef7a7 100644
--- a/src/components/skeletons/SkeletonElement/SkeletonElement.tsx
+++ b/src/components/skeletons/SkeletonElement/SkeletonElement.tsx
@@ -7,16 +7,25 @@ import './skeleton-element.scss'
 type ElementVariant = 'text' | 'button' | 'image' | 'badge'
 
 interface Props {
+  loading?: boolean
   shimmer?: boolean
   type: ElementVariant
+  children?: JSX.Element
 }
 
-function SkeletonElement({ type, shimmer = false }: Props) {
-  return (
+function SkeletonElement({
+  type,
+  children,
+  loading = true,
+  shimmer = false,
+}: Props) {
+  return loading ? (
     <div data-store-skeleton-element data-shimmer={shimmer}>
       <div data-skeleton-element-content data-element-variant={type} />
       {shimmer && <Shimmer />}
     </div>
+  ) : (
+    children ?? null
   )
 }
 
diff --git a/src/components/skeletons/SkeletonFilter/SkeletonFilter.tsx b/src/components/skeletons/SkeletonFilter/SkeletonFilter.tsx
index 9a68f6c96..f4989f436 100644
--- a/src/components/skeletons/SkeletonFilter/SkeletonFilter.tsx
+++ b/src/components/skeletons/SkeletonFilter/SkeletonFilter.tsx
@@ -4,8 +4,13 @@ import Shimmer from '../Shimmer'
 import SkeletonElement from '../SkeletonElement'
 import './skeleton-filter.scss'
 
-function SkeletonFilter() {
-  return (
+interface Props {
+  loading?: boolean
+  children?: JSX.Element
+}
+
+function SkeletonFilter({ children, loading = true }: Props) {
+  return loading ? (
     <div data-store-skeleton-filter>
       <SkeletonElement shimmer type="text" />
 
@@ -16,6 +21,8 @@ function SkeletonFilter() {
         <Shimmer />
       </div>
     </div>
+  ) : (
+    children ?? null
   )
 }
 

From 0111cd85b85127d79b2c3f10e879501e84443bbf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Feij=C3=B3?= <lucas.portela@vtex.com.br>
Date: Wed, 16 Feb 2022 10:09:58 -0300
Subject: [PATCH 21/42] Add ProductGrid skeleton

---
 .../product/ProductGrid/ProductGrid.tsx       | 41 ++++++++-----------
 .../SkeletonProductGrid.tsx                   | 27 ++++++++++++
 .../skeletons/SkeletonProductGrid/index.ts    |  1 +
 3 files changed, 46 insertions(+), 23 deletions(-)
 create mode 100644 src/components/skeletons/SkeletonProductGrid/SkeletonProductGrid.tsx
 create mode 100644 src/components/skeletons/SkeletonProductGrid/index.ts

diff --git a/src/components/product/ProductGrid/ProductGrid.tsx b/src/components/product/ProductGrid/ProductGrid.tsx
index a668f2326..21dbc8a3d 100644
--- a/src/components/product/ProductGrid/ProductGrid.tsx
+++ b/src/components/product/ProductGrid/ProductGrid.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import type { ProductSummary_ProductFragment } from '@generated/graphql'
-import { ITEMS_PER_PAGE } from 'src/constants'
-import SkeletonProductCard from 'src/components/skeletons/SkeletonProductCard'
+import SkeletonProductGrid from 'src/components/skeletons/SkeletonProductGrid'
 
 import ProductCard from '../ProductCard'
 import './product-grid.scss'
@@ -16,27 +15,23 @@ function ProductGrid({ products, page, pageSize }: Props) {
   const haveProducts = products && products?.length > 0
 
   return (
-    <ul className="product-grid">
-      {haveProducts
-        ? 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>
-          ))
-        : Array.from({ length: ITEMS_PER_PAGE }, (_, index) => (
-            <li key={String(index)}>
-              <SkeletonProductCard bordered />
-            </li>
-          ))}
-    </ul>
+    <SkeletonProductGrid loading={!haveProducts}>
+      <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>
+    </SkeletonProductGrid>
   )
 }
 
diff --git a/src/components/skeletons/SkeletonProductGrid/SkeletonProductGrid.tsx b/src/components/skeletons/SkeletonProductGrid/SkeletonProductGrid.tsx
new file mode 100644
index 000000000..e6cc3ee0a
--- /dev/null
+++ b/src/components/skeletons/SkeletonProductGrid/SkeletonProductGrid.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import { ITEMS_PER_PAGE } from 'src/constants'
+
+import SkeletonProductCard from '../SkeletonProductCard'
+
+import 'src/components/product/ProductGrid/product-grid.scss'
+
+interface Props {
+  loading?: boolean
+  children?: JSX.Element
+}
+
+function SkeletonProductGrid({ children, loading = true }: Props) {
+  return loading ? (
+    <ul className="product-grid">
+      {Array.from({ length: ITEMS_PER_PAGE }, (_, index) => (
+        <li key={String(index)}>
+          <SkeletonProductCard bordered />
+        </li>
+      ))}
+    </ul>
+  ) : (
+    children ?? null
+  )
+}
+
+export default SkeletonProductGrid
diff --git a/src/components/skeletons/SkeletonProductGrid/index.ts b/src/components/skeletons/SkeletonProductGrid/index.ts
new file mode 100644
index 000000000..b6c5dbbcc
--- /dev/null
+++ b/src/components/skeletons/SkeletonProductGrid/index.ts
@@ -0,0 +1 @@
+export { default } from './SkeletonProductGrid'

From 0e31408216249336a5c7cb5ff3d19649acbf0c45 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Feij=C3=B3?= <lucas.portela@vtex.com.br>
Date: Wed, 16 Feb 2022 10:10:39 -0300
Subject: [PATCH 22/42] Add ProductShelf skeleton

---
 .../sections/ProductShelf/ProductShelf.tsx    | 25 +++++++----------
 .../SkeletonProductShelf.tsx                  | 27 +++++++++++++++++++
 .../skeletons/SkeletonProductShelf/index.ts   |  1 +
 3 files changed, 38 insertions(+), 15 deletions(-)
 create mode 100644 src/components/skeletons/SkeletonProductShelf/SkeletonProductShelf.tsx
 create mode 100644 src/components/skeletons/SkeletonProductShelf/index.ts

diff --git a/src/components/sections/ProductShelf/ProductShelf.tsx b/src/components/sections/ProductShelf/ProductShelf.tsx
index 4f3e252c3..7c2604bc4 100644
--- a/src/components/sections/ProductShelf/ProductShelf.tsx
+++ b/src/components/sections/ProductShelf/ProductShelf.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import type { ProductSummary_ProductFragment } from '@generated/graphql'
-import { ITEMS_PER_SECTION } from 'src/constants'
-import SkeletonProductCard from 'src/components/skeletons/SkeletonProductCard'
+import SkeletonProductShelf from 'src/components/skeletons/SkeletonProductShelf'
 
 import ProductCard from '../../product/ProductCard'
 
@@ -15,19 +14,15 @@ function ProductShelf({ products }: ProductShelfProps) {
   const haveProducts = products && products?.length > 0
 
   return (
-    <ul data-product-shelf className="grid-content">
-      {haveProducts
-        ? products.map((product, idx) => (
-            <li key={`${product.id}`}>
-              <ProductCard product={product} index={idx + 1} />
-            </li>
-          ))
-        : Array.from({ length: ITEMS_PER_SECTION }, (_, index) => (
-            <li key={String(index)}>
-              <SkeletonProductCard sectioned />
-            </li>
-          ))}
-    </ul>
+    <SkeletonProductShelf loading={!haveProducts}>
+      <ul data-product-shelf className="grid-content">
+        {products.map((product, idx) => (
+          <li key={`${product.id}`}>
+            <ProductCard product={product} index={idx + 1} />
+          </li>
+        ))}
+      </ul>
+    </SkeletonProductShelf>
   )
 }
 
diff --git a/src/components/skeletons/SkeletonProductShelf/SkeletonProductShelf.tsx b/src/components/skeletons/SkeletonProductShelf/SkeletonProductShelf.tsx
new file mode 100644
index 000000000..4cc3276c1
--- /dev/null
+++ b/src/components/skeletons/SkeletonProductShelf/SkeletonProductShelf.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import { ITEMS_PER_SECTION } from 'src/constants'
+
+import SkeletonProductCard from '../SkeletonProductCard'
+
+import 'src/components/sections/ProductShelf/product-shelf.scss'
+
+interface Props {
+  loading?: boolean
+  children?: JSX.Element
+}
+
+function SkeletonProductShelf({ children, loading = true }: Props) {
+  return loading ? (
+    <ul data-product-shelf className="grid-content">
+      {Array.from({ length: ITEMS_PER_SECTION }, (_, index) => (
+        <li key={String(index)}>
+          <SkeletonProductCard sectioned />
+        </li>
+      ))}
+    </ul>
+  ) : (
+    children ?? null
+  )
+}
+
+export default SkeletonProductShelf
diff --git a/src/components/skeletons/SkeletonProductShelf/index.ts b/src/components/skeletons/SkeletonProductShelf/index.ts
new file mode 100644
index 000000000..086e03a26
--- /dev/null
+++ b/src/components/skeletons/SkeletonProductShelf/index.ts
@@ -0,0 +1 @@
+export { default } from './SkeletonProductShelf'

From 5878ad209d32ba773df1195929bccce3b3c84b29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Feij=C3=B3?= <lucas.portela@vtex.com.br>
Date: Wed, 16 Feb 2022 10:15:20 -0300
Subject: [PATCH 23/42] Add ProductTiles skeleton

---
 .../sections/ProductTiles/ProductTiles.tsx    | 30 ++++++++++---------
 .../SkeletonProductTile.tsx                   |  4 +--
 .../SkeletonProductTile/index.ts              |  0
 .../skeleton-product-tile.scss                |  2 +-
 .../SkeletonProductTiles.tsx                  | 30 +++++++++++++++++++
 .../skeletons/SkeletonProductTiles/index.ts   |  1 +
 6 files changed, 50 insertions(+), 17 deletions(-)
 rename src/components/skeletons/{ => SkeletonProductTiles}/SkeletonProductTile/SkeletonProductTile.tsx (92%)
 rename src/components/skeletons/{ => SkeletonProductTiles}/SkeletonProductTile/index.ts (100%)
 rename src/components/skeletons/{ => SkeletonProductTiles}/SkeletonProductTile/skeleton-product-tile.scss (98%)
 create mode 100644 src/components/skeletons/SkeletonProductTiles/SkeletonProductTiles.tsx
 create mode 100644 src/components/skeletons/SkeletonProductTiles/index.ts

diff --git a/src/components/sections/ProductTiles/ProductTiles.tsx b/src/components/sections/ProductTiles/ProductTiles.tsx
index 4bb7bb42e..6d98b1163 100644
--- a/src/components/sections/ProductTiles/ProductTiles.tsx
+++ b/src/components/sections/ProductTiles/ProductTiles.tsx
@@ -2,7 +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 SkeletonProductTile from 'src/components/skeletons/SkeletonProductTile'
+import SkeletonProductTiles from 'src/components/skeletons/SkeletonProductTiles'
 
 interface TilesProps {
   products: ProductSummary_ProductFragment[]
@@ -27,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>
+    <SkeletonProductTiles 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>
+    </SkeletonProductTiles>
   )
 }
 
diff --git a/src/components/skeletons/SkeletonProductTile/SkeletonProductTile.tsx b/src/components/skeletons/SkeletonProductTiles/SkeletonProductTile/SkeletonProductTile.tsx
similarity index 92%
rename from src/components/skeletons/SkeletonProductTile/SkeletonProductTile.tsx
rename to src/components/skeletons/SkeletonProductTiles/SkeletonProductTile/SkeletonProductTile.tsx
index 4c8828fde..a7a4143ee 100644
--- a/src/components/skeletons/SkeletonProductTile/SkeletonProductTile.tsx
+++ b/src/components/skeletons/SkeletonProductTiles/SkeletonProductTile/SkeletonProductTile.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 
-import Shimmer from '../Shimmer'
-import SkeletonElement from '../SkeletonElement'
+import Shimmer from '../../Shimmer'
+import SkeletonElement from '../../SkeletonElement'
 import './skeleton-product-tile.scss'
 
 interface Props {
diff --git a/src/components/skeletons/SkeletonProductTile/index.ts b/src/components/skeletons/SkeletonProductTiles/SkeletonProductTile/index.ts
similarity index 100%
rename from src/components/skeletons/SkeletonProductTile/index.ts
rename to src/components/skeletons/SkeletonProductTiles/SkeletonProductTile/index.ts
diff --git a/src/components/skeletons/SkeletonProductTile/skeleton-product-tile.scss b/src/components/skeletons/SkeletonProductTiles/SkeletonProductTile/skeleton-product-tile.scss
similarity index 98%
rename from src/components/skeletons/SkeletonProductTile/skeleton-product-tile.scss
rename to src/components/skeletons/SkeletonProductTiles/SkeletonProductTile/skeleton-product-tile.scss
index ba37633ee..a3474e27c 100644
--- a/src/components/skeletons/SkeletonProductTile/skeleton-product-tile.scss
+++ b/src/components/skeletons/SkeletonProductTiles/SkeletonProductTile/skeleton-product-tile.scss
@@ -1,4 +1,4 @@
-@import "../../../styles/vendors/include-media.scss";
+@import "../../../../styles/vendors/include-media.scss";
 
 [data-store-skeleton-product-tile] {
   position: relative;
diff --git a/src/components/skeletons/SkeletonProductTiles/SkeletonProductTiles.tsx b/src/components/skeletons/SkeletonProductTiles/SkeletonProductTiles.tsx
new file mode 100644
index 000000000..e93575209
--- /dev/null
+++ b/src/components/skeletons/SkeletonProductTiles/SkeletonProductTiles.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import Tiles, { Tile } from 'src/components/ui/Tiles'
+
+import SkeletonProductTile from './SkeletonProductTile'
+
+interface Props {
+  loading?: boolean
+  children?: JSX.Element
+  variant?: 'vertical' | 'horizontal'
+}
+
+function SkeletonProductTiles({
+  children,
+  loading = true,
+  variant = 'vertical',
+}: Props) {
+  return loading ? (
+    <Tiles>
+      {Array.from({ length: 3 }, (_, index) => (
+        <Tile key={String(index)}>
+          <SkeletonProductTile tileIndex={index + 1} variant={variant} />
+        </Tile>
+      ))}
+    </Tiles>
+  ) : (
+    children ?? null
+  )
+}
+
+export default SkeletonProductTiles
diff --git a/src/components/skeletons/SkeletonProductTiles/index.ts b/src/components/skeletons/SkeletonProductTiles/index.ts
new file mode 100644
index 000000000..2f7407eea
--- /dev/null
+++ b/src/components/skeletons/SkeletonProductTiles/index.ts
@@ -0,0 +1 @@
+export { default } from './SkeletonProductTiles'

From 3eae783bae1f12d8a5d2777ddc5d6a72f9aaa9c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Feij=C3=B3?= <lucas.portela@vtex.com.br>
Date: Wed, 16 Feb 2022 11:02:56 -0300
Subject: [PATCH 24/42] Add CHANGELOG entry

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index aaf04ff6b..0382fa88c 100644
--- a/CHANGELOG.md
+++ b/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

From 281c972adf90cfc8dbc93099dd62a13854c3900b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Feij=C3=B3?= <lucas.portela@vtex.com.br>
Date: Wed, 16 Feb 2022 11:39:23 -0300
Subject: [PATCH 25/42] Use `translate3d` for performance sake

---
 src/components/skeletons/Shimmer/shimmer.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/skeletons/Shimmer/shimmer.scss b/src/components/skeletons/Shimmer/shimmer.scss
index a0aebeebd..5631cdf1a 100644
--- a/src/components/skeletons/Shimmer/shimmer.scss
+++ b/src/components/skeletons/Shimmer/shimmer.scss
@@ -8,7 +8,7 @@
   left: 0;
   width: 100%;
   height: 100%;
-  animation: loading 1.2s infinite;
+  animation: loading 1s infinite;
 
   [data-shimmer] {
     width: 50%;
@@ -20,7 +20,7 @@
 }
 
 @keyframes loading {
-  0% { transform: translateX(-150%); }
-  50% { transform: translateX(-60%); }
-  100% { transform: translateX(150%); }
+  0% { transform: translate3d(-150%, 0, 0); }
+  50% { transform: translate3d(-60%, 0, 0); }
+  100% { transform: translate3d(150%, 0, 0); }
 }

From c43c26f027e763ceccd1926ed560098e01ade0d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Feij=C3=B3?= <lucas.portela@vtex.com.br>
Date: Wed, 16 Feb 2022 23:04:53 -0300
Subject: [PATCH 26/42] Remove unnecessary checking

---
 src/components/product/ProductGrid/ProductGrid.tsx    | 2 +-
 src/components/sections/ProductShelf/ProductShelf.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/product/ProductGrid/ProductGrid.tsx b/src/components/product/ProductGrid/ProductGrid.tsx
index 21dbc8a3d..f6173d0b1 100644
--- a/src/components/product/ProductGrid/ProductGrid.tsx
+++ b/src/components/product/ProductGrid/ProductGrid.tsx
@@ -12,7 +12,7 @@ interface Props {
 }
 
 function ProductGrid({ products, page, pageSize }: Props) {
-  const haveProducts = products && products?.length > 0
+  const haveProducts = products?.length > 0
 
   return (
     <SkeletonProductGrid loading={!haveProducts}>
diff --git a/src/components/sections/ProductShelf/ProductShelf.tsx b/src/components/sections/ProductShelf/ProductShelf.tsx
index 7c2604bc4..fb690a75a 100644
--- a/src/components/sections/ProductShelf/ProductShelf.tsx
+++ b/src/components/sections/ProductShelf/ProductShelf.tsx
@@ -11,7 +11,7 @@ interface ProductShelfProps {
 }
 
 function ProductShelf({ products }: ProductShelfProps) {
-  const haveProducts = products && products?.length > 0
+  const haveProducts = products?.length > 0
 
   return (
     <SkeletonProductShelf loading={!haveProducts}>

From 71b2d006dd9af0f02f9e1a81d99fade16ed78ccd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Feij=C3=B3?= <lucas.portela@vtex.com.br>
Date: Wed, 16 Feb 2022 23:46:58 -0300
Subject: [PATCH 27/42] Minor fixes

---
 src/components/product/ProductGrid/ProductGrid.tsx           | 4 +---
 src/components/sections/ProductShelf/ProductShelf.tsx        | 4 +---
 .../SkeletonProductTile/SkeletonProductTile.tsx              | 5 ++---
 3 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/components/product/ProductGrid/ProductGrid.tsx b/src/components/product/ProductGrid/ProductGrid.tsx
index f6173d0b1..11c7c56f7 100644
--- a/src/components/product/ProductGrid/ProductGrid.tsx
+++ b/src/components/product/ProductGrid/ProductGrid.tsx
@@ -12,10 +12,8 @@ interface Props {
 }
 
 function ProductGrid({ products, page, pageSize }: Props) {
-  const haveProducts = products?.length > 0
-
   return (
-    <SkeletonProductGrid loading={!haveProducts}>
+    <SkeletonProductGrid loading={products?.length === 0}>
       <ul className="product-grid">
         {products.map((product, idx) => (
           <li key={`${product.id}`}>
diff --git a/src/components/sections/ProductShelf/ProductShelf.tsx b/src/components/sections/ProductShelf/ProductShelf.tsx
index fb690a75a..49649119a 100644
--- a/src/components/sections/ProductShelf/ProductShelf.tsx
+++ b/src/components/sections/ProductShelf/ProductShelf.tsx
@@ -11,10 +11,8 @@ interface ProductShelfProps {
 }
 
 function ProductShelf({ products }: ProductShelfProps) {
-  const haveProducts = products?.length > 0
-
   return (
-    <SkeletonProductShelf loading={!haveProducts}>
+    <SkeletonProductShelf loading={products?.length === 0}>
       <ul data-product-shelf className="grid-content">
         {products.map((product, idx) => (
           <li key={`${product.id}`}>
diff --git a/src/components/skeletons/SkeletonProductTiles/SkeletonProductTile/SkeletonProductTile.tsx b/src/components/skeletons/SkeletonProductTiles/SkeletonProductTile/SkeletonProductTile.tsx
index a7a4143ee..e7e28273c 100644
--- a/src/components/skeletons/SkeletonProductTiles/SkeletonProductTile/SkeletonProductTile.tsx
+++ b/src/components/skeletons/SkeletonProductTiles/SkeletonProductTile/SkeletonProductTile.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
-
-import Shimmer from '../../Shimmer'
-import SkeletonElement from '../../SkeletonElement'
+import Shimmer from 'src/components/skeletons/Shimmer'
+import SkeletonElement from 'src/components/skeletons/SkeletonElement'
 import './skeleton-product-tile.scss'
 
 interface Props {

From a04447bf740e1bcfa4081067ac402a6701d1861c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Feij=C3=B3?= <lucas.portela@vtex.com.br>
Date: Thu, 17 Feb 2022 00:39:12 -0300
Subject: [PATCH 28/42] Fixes after rebase

---
 src/components/sections/ProductGallery/ProductGallery.tsx   | 3 +++
 src/components/sections/ProductGallery/product-gallery.scss | 4 ++++
 2 files changed, 7 insertions(+)

diff --git a/src/components/sections/ProductGallery/ProductGallery.tsx b/src/components/sections/ProductGallery/ProductGallery.tsx
index 8e8c40204..955652978 100644
--- a/src/components/sections/ProductGallery/ProductGallery.tsx
+++ b/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 SkeletonFilter from 'src/components/skeletons/SkeletonFilter'
+import ProductGrid from 'src/components/product/ProductGrid'
 
 import GalleryPage from './ProductGalleryPage'
 import { useGalleryQuery } from './useGalleryQuery'
diff --git a/src/components/sections/ProductGallery/product-gallery.scss b/src/components/sections/ProductGallery/product-gallery.scss
index 35879d5d8..483ffebf4 100644
--- a/src/components/sections/ProductGallery/product-gallery.scss
+++ b/src/components/sections/ProductGallery/product-gallery.scss
@@ -77,6 +77,10 @@
     .button[data-store-button] {
       display: none;
     }
+
+    [data-element-variant="button"] {
+      display: none;
+    }
   }
 }
 

From e7becb57ddd0f93f3998ac9d30679a5a6a893c12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Feij=C3=B3?= <lucas.portela@vtex.com.br>
Date: Thu, 17 Feb 2022 09:31:46 -0300
Subject: [PATCH 29/42] Use `PropsWithChildren` instead get `children` as prop

---
 .../SkeletonProductGrid/SkeletonProductGrid.tsx          | 9 ++++++---
 .../SkeletonProductShelf/SkeletonProductShelf.tsx        | 9 ++++++---
 .../SkeletonProductTiles/SkeletonProductTiles.tsx        | 6 +++---
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/skeletons/SkeletonProductGrid/SkeletonProductGrid.tsx b/src/components/skeletons/SkeletonProductGrid/SkeletonProductGrid.tsx
index e6cc3ee0a..9f4673aad 100644
--- a/src/components/skeletons/SkeletonProductGrid/SkeletonProductGrid.tsx
+++ b/src/components/skeletons/SkeletonProductGrid/SkeletonProductGrid.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import type { PropsWithChildren } from 'react'
 import { ITEMS_PER_PAGE } from 'src/constants'
 
 import SkeletonProductCard from '../SkeletonProductCard'
@@ -7,10 +8,12 @@ import 'src/components/product/ProductGrid/product-grid.scss'
 
 interface Props {
   loading?: boolean
-  children?: JSX.Element
 }
 
-function SkeletonProductGrid({ children, loading = true }: Props) {
+function SkeletonProductGrid({
+  children,
+  loading = true,
+}: PropsWithChildren<Props>) {
   return loading ? (
     <ul className="product-grid">
       {Array.from({ length: ITEMS_PER_PAGE }, (_, index) => (
@@ -20,7 +23,7 @@ function SkeletonProductGrid({ children, loading = true }: Props) {
       ))}
     </ul>
   ) : (
-    children ?? null
+    <>{children}</>
   )
 }
 
diff --git a/src/components/skeletons/SkeletonProductShelf/SkeletonProductShelf.tsx b/src/components/skeletons/SkeletonProductShelf/SkeletonProductShelf.tsx
index 4cc3276c1..6eaf962f7 100644
--- a/src/components/skeletons/SkeletonProductShelf/SkeletonProductShelf.tsx
+++ b/src/components/skeletons/SkeletonProductShelf/SkeletonProductShelf.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import type { PropsWithChildren } from 'react'
 import { ITEMS_PER_SECTION } from 'src/constants'
 
 import SkeletonProductCard from '../SkeletonProductCard'
@@ -7,10 +8,12 @@ import 'src/components/sections/ProductShelf/product-shelf.scss'
 
 interface Props {
   loading?: boolean
-  children?: JSX.Element
 }
 
-function SkeletonProductShelf({ children, loading = true }: Props) {
+function SkeletonProductShelf({
+  children,
+  loading = true,
+}: PropsWithChildren<Props>) {
   return loading ? (
     <ul data-product-shelf className="grid-content">
       {Array.from({ length: ITEMS_PER_SECTION }, (_, index) => (
@@ -20,7 +23,7 @@ function SkeletonProductShelf({ children, loading = true }: Props) {
       ))}
     </ul>
   ) : (
-    children ?? null
+    <>{children}</>
   )
 }
 
diff --git a/src/components/skeletons/SkeletonProductTiles/SkeletonProductTiles.tsx b/src/components/skeletons/SkeletonProductTiles/SkeletonProductTiles.tsx
index e93575209..f4b2f677e 100644
--- a/src/components/skeletons/SkeletonProductTiles/SkeletonProductTiles.tsx
+++ b/src/components/skeletons/SkeletonProductTiles/SkeletonProductTiles.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
+import type { PropsWithChildren } from 'react'
 import Tiles, { Tile } from 'src/components/ui/Tiles'
 
 import SkeletonProductTile from './SkeletonProductTile'
 
 interface Props {
   loading?: boolean
-  children?: JSX.Element
   variant?: 'vertical' | 'horizontal'
 }
 
@@ -13,7 +13,7 @@ function SkeletonProductTiles({
   children,
   loading = true,
   variant = 'vertical',
-}: Props) {
+}: PropsWithChildren<Props>) {
   return loading ? (
     <Tiles>
       {Array.from({ length: 3 }, (_, index) => (
@@ -23,7 +23,7 @@ function SkeletonProductTiles({
       ))}
     </Tiles>
   ) : (
-    children ?? null
+    <>{children}</>
   )
 }
 

From efda4aeaab0a104d0f053d9e3ced2625f4676dcc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Feij=C3=B3?= <lucas.portela@vtex.com.br>
Date: Thu, 17 Feb 2022 10:23:50 -0300
Subject: [PATCH 30/42] Adjust animation to use absolute unit `vw`

---
 src/components/skeletons/Shimmer/shimmer.scss | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/skeletons/Shimmer/shimmer.scss b/src/components/skeletons/Shimmer/shimmer.scss
index 5631cdf1a..f6b946c05 100644
--- a/src/components/skeletons/Shimmer/shimmer.scss
+++ b/src/components/skeletons/Shimmer/shimmer.scss
@@ -8,19 +8,18 @@
   left: 0;
   width: 100%;
   height: 100%;
-  animation: loading 1s infinite;
+  animation: loading 1.2s infinite;
 
   [data-shimmer] {
     width: 50%;
     height: 100%;
     background: var(--color-white-transparent-20);
     box-shadow: 0 0 var(--space-5) var(--space-5) var(--color-white-transparent-20);
-    transform: skewX(-20deg);
   }
 }
 
 @keyframes loading {
-  0% { transform: translate3d(-150%, 0, 0); }
-  50% { transform: translate3d(-60%, 0, 0); }
-  100% { transform: translate3d(150%, 0, 0); }
+  0% { transform: translate3d(-15vw, 0, 0); }
+  50% { transform: translate3d(-6vw, 0, 0); }
+  100% { transform: translate3d(15vw, 0, 0); }
 }

From f878818646cf1defecb9a3fe4f87d28aa001aab4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Feij=C3=B3?= <lucas.portela@vtex.com.br>
Date: Thu, 17 Feb 2022 15:22:23 -0300
Subject: [PATCH 31/42] Adjust shimmer effect animation

---
 src/components/skeletons/Shimmer/shimmer.scss | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/skeletons/Shimmer/shimmer.scss b/src/components/skeletons/Shimmer/shimmer.scss
index f6b946c05..e6beed90d 100644
--- a/src/components/skeletons/Shimmer/shimmer.scss
+++ b/src/components/skeletons/Shimmer/shimmer.scss
@@ -6,9 +6,9 @@
   position: absolute;
   top: 0;
   left: 0;
-  width: 100%;
+  width: 200vw;
   height: 100%;
-  animation: loading 1.2s infinite;
+  animation: loading 800ms infinite linear;
 
   [data-shimmer] {
     width: 50%;
@@ -19,7 +19,6 @@
 }
 
 @keyframes loading {
-  0% { transform: translate3d(-15vw, 0, 0); }
-  50% { transform: translate3d(-6vw, 0, 0); }
-  100% { transform: translate3d(15vw, 0, 0); }
+  0% { transform: translate3d(-100vw, 0, 0); }
+  100% { transform: translate3d(0, 0, 0); }
 }

From e9b0d5268d3fe3ff53c2e9ef1e58cc3c14ccb4b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Feij=C3=B3?= <lucas.portela@vtex.com.br>
Date: Thu, 17 Feb 2022 15:31:36 -0300
Subject: [PATCH 32/42] Rename skeleton components according to its context

---
 .../product/ProductGrid/ProductGrid.tsx       |  6 +++---
 .../ProductGallery/ProductGallery.tsx         |  6 +++---
 .../sections/ProductShelf/ProductShelf.tsx    |  6 +++---
 .../sections/ProductTiles/ProductTiles.tsx    |  6 +++---
 .../FilterSkeleton.tsx}                       | 10 +++++-----
 .../filter-skeleton.scss}                     |  4 ++--
 .../skeletons/FilterSkeleton/index.ts         |  1 +
 .../ProductCardSkeleton.tsx}                  | 12 +++++------
 .../skeletons/ProductCardSkeleton/index.ts    |  1 +
 .../product-card-skeleton.scss}               | 18 +++--------------
 .../ProductGridSkeleton.tsx}                  |  8 ++++----
 .../skeletons/ProductGridSkeleton/index.ts    |  1 +
 .../ProductShelfSkeleton.tsx}                 |  8 ++++----
 .../skeletons/ProductShelfSkeleton/index.ts   |  1 +
 .../ProductTileSkeleton.tsx}                  | 20 +++++++++----------
 .../ProductTileSkeleton/index.ts              |  1 +
 .../product-tile-skeleton.scss}               | 14 ++++++-------
 .../ProductTilesSkeleton.tsx}                 |  8 ++++----
 .../skeletons/ProductTilesSkeleton/index.ts   |  1 +
 .../skeletons/SkeletonFilter/index.ts         |  1 -
 .../skeletons/SkeletonProductCard/index.ts    |  1 -
 .../skeletons/SkeletonProductGrid/index.ts    |  1 -
 .../skeletons/SkeletonProductShelf/index.ts   |  1 -
 .../SkeletonProductTile/index.ts              |  1 -
 .../skeletons/SkeletonProductTiles/index.ts   |  1 -
 25 files changed, 63 insertions(+), 75 deletions(-)
 rename src/components/skeletons/{SkeletonFilter/SkeletonFilter.tsx => FilterSkeleton/FilterSkeleton.tsx} (68%)
 rename src/components/skeletons/{SkeletonFilter/skeleton-filter.scss => FilterSkeleton/filter-skeleton.scss} (90%)
 create mode 100644 src/components/skeletons/FilterSkeleton/index.ts
 rename src/components/skeletons/{SkeletonProductCard/SkeletonProductCard.tsx => ProductCardSkeleton/ProductCardSkeleton.tsx} (73%)
 create mode 100644 src/components/skeletons/ProductCardSkeleton/index.ts
 rename src/components/skeletons/{SkeletonProductCard/skeleton-product-card.scss => ProductCardSkeleton/product-card-skeleton.scss} (77%)
 rename src/components/skeletons/{SkeletonProductGrid/SkeletonProductGrid.tsx => ProductGridSkeleton/ProductGridSkeleton.tsx} (75%)
 create mode 100644 src/components/skeletons/ProductGridSkeleton/index.ts
 rename src/components/skeletons/{SkeletonProductShelf/SkeletonProductShelf.tsx => ProductShelfSkeleton/ProductShelfSkeleton.tsx} (75%)
 create mode 100644 src/components/skeletons/ProductShelfSkeleton/index.ts
 rename src/components/skeletons/{SkeletonProductTiles/SkeletonProductTile/SkeletonProductTile.tsx => ProductTilesSkeleton/ProductTileSkeleton/ProductTileSkeleton.tsx} (57%)
 create mode 100644 src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/index.ts
 rename src/components/skeletons/{SkeletonProductTiles/SkeletonProductTile/skeleton-product-tile.scss => ProductTilesSkeleton/ProductTileSkeleton/product-tile-skeleton.scss} (92%)
 rename src/components/skeletons/{SkeletonProductTiles/SkeletonProductTiles.tsx => ProductTilesSkeleton/ProductTilesSkeleton.tsx} (72%)
 create mode 100644 src/components/skeletons/ProductTilesSkeleton/index.ts
 delete mode 100644 src/components/skeletons/SkeletonFilter/index.ts
 delete mode 100644 src/components/skeletons/SkeletonProductCard/index.ts
 delete mode 100644 src/components/skeletons/SkeletonProductGrid/index.ts
 delete mode 100644 src/components/skeletons/SkeletonProductShelf/index.ts
 delete mode 100644 src/components/skeletons/SkeletonProductTiles/SkeletonProductTile/index.ts
 delete mode 100644 src/components/skeletons/SkeletonProductTiles/index.ts

diff --git a/src/components/product/ProductGrid/ProductGrid.tsx b/src/components/product/ProductGrid/ProductGrid.tsx
index 11c7c56f7..c28fb45a3 100644
--- a/src/components/product/ProductGrid/ProductGrid.tsx
+++ b/src/components/product/ProductGrid/ProductGrid.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import type { ProductSummary_ProductFragment } from '@generated/graphql'
-import SkeletonProductGrid from 'src/components/skeletons/SkeletonProductGrid'
+import ProductGridSkeleton from 'src/components/skeletons/ProductGridSkeleton'
 
 import ProductCard from '../ProductCard'
 import './product-grid.scss'
@@ -13,7 +13,7 @@ interface Props {
 
 function ProductGrid({ products, page, pageSize }: Props) {
   return (
-    <SkeletonProductGrid loading={products?.length === 0}>
+    <ProductGridSkeleton loading={products?.length === 0}>
       <ul className="product-grid">
         {products.map((product, idx) => (
           <li key={`${product.id}`}>
@@ -29,7 +29,7 @@ function ProductGrid({ products, page, pageSize }: Props) {
           </li>
         ))}
       </ul>
-    </SkeletonProductGrid>
+    </ProductGridSkeleton>
   )
 }
 
diff --git a/src/components/sections/ProductGallery/ProductGallery.tsx b/src/components/sections/ProductGallery/ProductGallery.tsx
index 955652978..9c7e2142b 100644
--- a/src/components/sections/ProductGallery/ProductGallery.tsx
+++ b/src/components/sections/ProductGallery/ProductGallery.tsx
@@ -9,7 +9,7 @@ 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 SkeletonFilter from 'src/components/skeletons/SkeletonFilter'
+import FilterSkeleton from 'src/components/skeletons/FilterSkeleton'
 import ProductGrid from 'src/components/product/ProductGrid'
 
 import GalleryPage from './ProductGalleryPage'
@@ -36,14 +36,14 @@ 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">
-          <SkeletonFilter loading={orderedFacets?.length === 0}>
+          <FilterSkeleton loading={orderedFacets?.length === 0}>
             <Filter
               slug={slug}
               isOpen={isFilterOpen}
               facets={orderedFacets}
               onDismiss={() => setIsFilterOpen(false)}
             />
-          </SkeletonFilter>
+          </FilterSkeleton>
         </div>
 
         <div className="product-listing__results-count" data-count={totalCount}>
diff --git a/src/components/sections/ProductShelf/ProductShelf.tsx b/src/components/sections/ProductShelf/ProductShelf.tsx
index 49649119a..edd20eef6 100644
--- a/src/components/sections/ProductShelf/ProductShelf.tsx
+++ b/src/components/sections/ProductShelf/ProductShelf.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import type { ProductSummary_ProductFragment } from '@generated/graphql'
-import SkeletonProductShelf from 'src/components/skeletons/SkeletonProductShelf'
+import ProductShelfSkeleton from 'src/components/skeletons/ProductShelfSkeleton'
 
 import ProductCard from '../../product/ProductCard'
 
@@ -12,7 +12,7 @@ interface ProductShelfProps {
 
 function ProductShelf({ products }: ProductShelfProps) {
   return (
-    <SkeletonProductShelf loading={products?.length === 0}>
+    <ProductShelfSkeleton loading={products?.length === 0}>
       <ul data-product-shelf className="grid-content">
         {products.map((product, idx) => (
           <li key={`${product.id}`}>
@@ -20,7 +20,7 @@ function ProductShelf({ products }: ProductShelfProps) {
           </li>
         ))}
       </ul>
-    </SkeletonProductShelf>
+    </ProductShelfSkeleton>
   )
 }
 
diff --git a/src/components/sections/ProductTiles/ProductTiles.tsx b/src/components/sections/ProductTiles/ProductTiles.tsx
index 6d98b1163..ffce43b24 100644
--- a/src/components/sections/ProductTiles/ProductTiles.tsx
+++ b/src/components/sections/ProductTiles/ProductTiles.tsx
@@ -2,7 +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 SkeletonProductTiles from 'src/components/skeletons/SkeletonProductTiles'
+import ProductTilesSkeleton from 'src/components/skeletons/ProductTilesSkeleton'
 
 interface TilesProps {
   products: ProductSummary_ProductFragment[]
@@ -27,7 +27,7 @@ const getRatio = (products: number, idx: number) => {
 
 const ProductTiles = ({ products }: TilesProps) => {
   return (
-    <SkeletonProductTiles variant="horizontal" loading={products?.length === 0}>
+    <ProductTilesSkeleton variant="horizontal" loading={products?.length === 0}>
       <Tiles>
         {products.map((product, idx) => (
           <Tile key={product.id}>
@@ -41,7 +41,7 @@ const ProductTiles = ({ products }: TilesProps) => {
           </Tile>
         ))}
       </Tiles>
-    </SkeletonProductTiles>
+    </ProductTilesSkeleton>
   )
 }
 
diff --git a/src/components/skeletons/SkeletonFilter/SkeletonFilter.tsx b/src/components/skeletons/FilterSkeleton/FilterSkeleton.tsx
similarity index 68%
rename from src/components/skeletons/SkeletonFilter/SkeletonFilter.tsx
rename to src/components/skeletons/FilterSkeleton/FilterSkeleton.tsx
index f4989f436..9d70588d0 100644
--- a/src/components/skeletons/SkeletonFilter/SkeletonFilter.tsx
+++ b/src/components/skeletons/FilterSkeleton/FilterSkeleton.tsx
@@ -2,19 +2,19 @@ import React from 'react'
 
 import Shimmer from '../Shimmer'
 import SkeletonElement from '../SkeletonElement'
-import './skeleton-filter.scss'
+import './filter-skeleton.scss'
 
 interface Props {
   loading?: boolean
   children?: JSX.Element
 }
 
-function SkeletonFilter({ children, loading = true }: Props) {
+function FilterSkeleton({ children, loading = true }: Props) {
   return loading ? (
-    <div data-store-skeleton-filter>
+    <div data-store-filter-skeleton>
       <SkeletonElement shimmer type="text" />
 
-      <div data-skeleton-filter-content>
+      <div data-filter-skeleton-content>
         <SkeletonElement type="text" />
         <SkeletonElement type="text" />
         <SkeletonElement type="text" />
@@ -26,4 +26,4 @@ function SkeletonFilter({ children, loading = true }: Props) {
   )
 }
 
-export default SkeletonFilter
+export default FilterSkeleton
diff --git a/src/components/skeletons/SkeletonFilter/skeleton-filter.scss b/src/components/skeletons/FilterSkeleton/filter-skeleton.scss
similarity index 90%
rename from src/components/skeletons/SkeletonFilter/skeleton-filter.scss
rename to src/components/skeletons/FilterSkeleton/filter-skeleton.scss
index c91ac0e20..5dfed0c33 100644
--- a/src/components/skeletons/SkeletonFilter/skeleton-filter.scss
+++ b/src/components/skeletons/FilterSkeleton/filter-skeleton.scss
@@ -1,11 +1,11 @@
 @import "../../../styles/scaffold";
 
-[data-store-skeleton-filter] {
+[data-store-filter-skeleton] {
   margin-top: var(--space-1);
 
   @include media("<notebook") { display: none; }
 
-  [data-skeleton-filter-content] {
+  [data-filter-skeleton-content] {
     position: relative;
     display: flex;
     flex-direction: column;
diff --git a/src/components/skeletons/FilterSkeleton/index.ts b/src/components/skeletons/FilterSkeleton/index.ts
new file mode 100644
index 000000000..3224f597c
--- /dev/null
+++ b/src/components/skeletons/FilterSkeleton/index.ts
@@ -0,0 +1 @@
+export { default } from './FilterSkeleton'
diff --git a/src/components/skeletons/SkeletonProductCard/SkeletonProductCard.tsx b/src/components/skeletons/ProductCardSkeleton/ProductCardSkeleton.tsx
similarity index 73%
rename from src/components/skeletons/SkeletonProductCard/SkeletonProductCard.tsx
rename to src/components/skeletons/ProductCardSkeleton/ProductCardSkeleton.tsx
index 072db5841..e83031627 100644
--- a/src/components/skeletons/SkeletonProductCard/SkeletonProductCard.tsx
+++ b/src/components/skeletons/ProductCardSkeleton/ProductCardSkeleton.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 
 import Shimmer from '../Shimmer'
 import SkeletonElement from '../SkeletonElement'
-import './skeleton-product-card.scss'
+import './product-card-skeleton.scss'
 
 interface Props {
   bordered?: boolean
@@ -11,7 +11,7 @@ interface Props {
   variant?: 'vertical' | 'horizontal'
 }
 
-const SkeletonProductCard = ({
+const ProductCardSkeleton = ({
   bordered,
   sectioned = false,
   showActions = false,
@@ -19,14 +19,14 @@ const SkeletonProductCard = ({
 }: Props) => {
   return (
     <div
-      data-store-skeleton-product-card
+      data-store-product-card-skeleton
       data-bordered={bordered}
       data-variant={variant}
     >
-      <div data-skeleton-product-card-image data-sectioned={sectioned}>
+      <div data-product-card-skeleton-image data-sectioned={sectioned}>
         <SkeletonElement type="image" />
       </div>
-      <div data-skeleton-product-card-content>
+      <div data-product-card-skeleton-content>
         <SkeletonElement type="text" />
         <SkeletonElement type="text" />
         <SkeletonElement type="badge" />
@@ -37,4 +37,4 @@ const SkeletonProductCard = ({
   )
 }
 
-export default SkeletonProductCard
+export default ProductCardSkeleton
diff --git a/src/components/skeletons/ProductCardSkeleton/index.ts b/src/components/skeletons/ProductCardSkeleton/index.ts
new file mode 100644
index 000000000..852a53006
--- /dev/null
+++ b/src/components/skeletons/ProductCardSkeleton/index.ts
@@ -0,0 +1 @@
+export { default } from './ProductCardSkeleton'
diff --git a/src/components/skeletons/SkeletonProductCard/skeleton-product-card.scss b/src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss
similarity index 77%
rename from src/components/skeletons/SkeletonProductCard/skeleton-product-card.scss
rename to src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss
index 06ad41ca3..4a633cedb 100644
--- a/src/components/skeletons/SkeletonProductCard/skeleton-product-card.scss
+++ b/src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss
@@ -1,6 +1,6 @@
 @import "../../../styles/scaffold";
 
-[data-store-skeleton-product-card] {
+[data-store-product-card-skeleton] {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -15,19 +15,7 @@
 
   &[data-bordered="true"] { border: var(--border-width-0) solid var(--color-border-display); }
 
-  &[data-variant="vertical"] {
-    [data-card-content] { padding-top: var(--space-2); }
-  }
-
-  &[data-variant="horizontal"] {
-    [data-card-content] {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: space-between;
-    }
-  }
-
-  [data-skeleton-product-card-image] {
+  [data-product-card-skeleton-image] {
     [data-element-variant="image"] {
       height: 45vw;
 
@@ -44,7 +32,7 @@
     }
   }
 
-  [data-skeleton-product-card-content] {
+  [data-product-card-skeleton-content] {
     position: relative;
     height: 20%;
     margin-top: var(--space-2);
diff --git a/src/components/skeletons/SkeletonProductGrid/SkeletonProductGrid.tsx b/src/components/skeletons/ProductGridSkeleton/ProductGridSkeleton.tsx
similarity index 75%
rename from src/components/skeletons/SkeletonProductGrid/SkeletonProductGrid.tsx
rename to src/components/skeletons/ProductGridSkeleton/ProductGridSkeleton.tsx
index 9f4673aad..71270deb3 100644
--- a/src/components/skeletons/SkeletonProductGrid/SkeletonProductGrid.tsx
+++ b/src/components/skeletons/ProductGridSkeleton/ProductGridSkeleton.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import type { PropsWithChildren } from 'react'
 import { ITEMS_PER_PAGE } from 'src/constants'
 
-import SkeletonProductCard from '../SkeletonProductCard'
+import ProductCardSkeleton from '../ProductCardSkeleton'
 
 import 'src/components/product/ProductGrid/product-grid.scss'
 
@@ -10,7 +10,7 @@ interface Props {
   loading?: boolean
 }
 
-function SkeletonProductGrid({
+function ProductGridSkeleton({
   children,
   loading = true,
 }: PropsWithChildren<Props>) {
@@ -18,7 +18,7 @@ function SkeletonProductGrid({
     <ul className="product-grid">
       {Array.from({ length: ITEMS_PER_PAGE }, (_, index) => (
         <li key={String(index)}>
-          <SkeletonProductCard bordered />
+          <ProductCardSkeleton bordered />
         </li>
       ))}
     </ul>
@@ -27,4 +27,4 @@ function SkeletonProductGrid({
   )
 }
 
-export default SkeletonProductGrid
+export default ProductGridSkeleton
diff --git a/src/components/skeletons/ProductGridSkeleton/index.ts b/src/components/skeletons/ProductGridSkeleton/index.ts
new file mode 100644
index 000000000..568e0cb13
--- /dev/null
+++ b/src/components/skeletons/ProductGridSkeleton/index.ts
@@ -0,0 +1 @@
+export { default } from './ProductGridSkeleton'
diff --git a/src/components/skeletons/SkeletonProductShelf/SkeletonProductShelf.tsx b/src/components/skeletons/ProductShelfSkeleton/ProductShelfSkeleton.tsx
similarity index 75%
rename from src/components/skeletons/SkeletonProductShelf/SkeletonProductShelf.tsx
rename to src/components/skeletons/ProductShelfSkeleton/ProductShelfSkeleton.tsx
index 6eaf962f7..ab4291893 100644
--- a/src/components/skeletons/SkeletonProductShelf/SkeletonProductShelf.tsx
+++ b/src/components/skeletons/ProductShelfSkeleton/ProductShelfSkeleton.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import type { PropsWithChildren } from 'react'
 import { ITEMS_PER_SECTION } from 'src/constants'
 
-import SkeletonProductCard from '../SkeletonProductCard'
+import ProductCardSkeleton from '../ProductCardSkeleton'
 
 import 'src/components/sections/ProductShelf/product-shelf.scss'
 
@@ -10,7 +10,7 @@ interface Props {
   loading?: boolean
 }
 
-function SkeletonProductShelf({
+function ProductShelfSkeleton({
   children,
   loading = true,
 }: PropsWithChildren<Props>) {
@@ -18,7 +18,7 @@ function SkeletonProductShelf({
     <ul data-product-shelf className="grid-content">
       {Array.from({ length: ITEMS_PER_SECTION }, (_, index) => (
         <li key={String(index)}>
-          <SkeletonProductCard sectioned />
+          <ProductCardSkeleton sectioned />
         </li>
       ))}
     </ul>
@@ -27,4 +27,4 @@ function SkeletonProductShelf({
   )
 }
 
-export default SkeletonProductShelf
+export default ProductShelfSkeleton
diff --git a/src/components/skeletons/ProductShelfSkeleton/index.ts b/src/components/skeletons/ProductShelfSkeleton/index.ts
new file mode 100644
index 000000000..e0147164a
--- /dev/null
+++ b/src/components/skeletons/ProductShelfSkeleton/index.ts
@@ -0,0 +1 @@
+export { default } from './ProductShelfSkeleton'
diff --git a/src/components/skeletons/SkeletonProductTiles/SkeletonProductTile/SkeletonProductTile.tsx b/src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/ProductTileSkeleton.tsx
similarity index 57%
rename from src/components/skeletons/SkeletonProductTiles/SkeletonProductTile/SkeletonProductTile.tsx
rename to src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/ProductTileSkeleton.tsx
index e7e28273c..5755c7220 100644
--- a/src/components/skeletons/SkeletonProductTiles/SkeletonProductTile/SkeletonProductTile.tsx
+++ b/src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/ProductTileSkeleton.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import Shimmer from 'src/components/skeletons/Shimmer'
 import SkeletonElement from 'src/components/skeletons/SkeletonElement'
-import './skeleton-product-tile.scss'
+import './product-tile-skeleton.scss'
 
 interface Props {
   tileIndex: number
@@ -9,30 +9,30 @@ interface Props {
   variant?: 'vertical' | 'horizontal'
 }
 
-const SkeletonProductTile = ({
+const ProductTileSkeleton = ({
   tileIndex,
   bordered,
   variant = 'vertical',
 }: Props) => {
   return (
     <div
-      data-store-skeleton-product-tile
+      data-store-product-tile-skeleton
       data-tile-index={tileIndex}
       data-bordered={bordered}
       data-variant={variant}
     >
-      <div data-skeleton-product-tile-image data-tile-index={tileIndex}>
+      <div data-product-tile-skeleton-image data-tile-index={tileIndex}>
         <SkeletonElement type="image" />
       </div>
-      <div data-skeleton-product-tile-content data-tile-index={tileIndex}>
-        <div data-skeleton-product-tile-text data-tile-index={tileIndex}>
+      <div data-product-tile-skeleton-content data-tile-index={tileIndex}>
+        <div data-product-tile-skeleton-text data-tile-index={tileIndex}>
           <SkeletonElement type="text" />
-          <div data-skeleton-product-tile-price>
-            <SkeletonElement type="text" data-skeleton-product-tile-price />
+          <div data-product-tile-skeleton-price>
+            <SkeletonElement type="text" />
           </div>
         </div>
 
-        <div data-skeleton-product-tile-badge data-tile-index={tileIndex}>
+        <div data-product-tile-skeleton-badge data-tile-index={tileIndex}>
           <SkeletonElement type="badge" />
         </div>
       </div>
@@ -41,4 +41,4 @@ const SkeletonProductTile = ({
   )
 }
 
-export default SkeletonProductTile
+export default ProductTileSkeleton
diff --git a/src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/index.ts b/src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/index.ts
new file mode 100644
index 000000000..6c876886c
--- /dev/null
+++ b/src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/index.ts
@@ -0,0 +1 @@
+export { default } from './ProductTileSkeleton'
diff --git a/src/components/skeletons/SkeletonProductTiles/SkeletonProductTile/skeleton-product-tile.scss b/src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/product-tile-skeleton.scss
similarity index 92%
rename from src/components/skeletons/SkeletonProductTiles/SkeletonProductTile/skeleton-product-tile.scss
rename to src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/product-tile-skeleton.scss
index a3474e27c..1f36a8ee3 100644
--- a/src/components/skeletons/SkeletonProductTiles/SkeletonProductTile/skeleton-product-tile.scss
+++ b/src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/product-tile-skeleton.scss
@@ -1,6 +1,6 @@
 @import "../../../../styles/vendors/include-media.scss";
 
-[data-store-skeleton-product-tile] {
+[data-store-product-tile-skeleton] {
   position: relative;
   width: 100%;
   min-width: 100%;
@@ -17,7 +17,7 @@
   }
 
   &[data-variant="horizontal"] {
-    [data-skeleton-product-tile-content] {
+    [data-product-tile-skeleton-content] {
       background-color: var(--bg-neutral-light);
 
       @include media(">=tablet") {
@@ -26,7 +26,7 @@
     }
   }
 
-  [data-skeleton-product-tile-image] {
+  [data-product-tile-skeleton-image] {
     height: 60%;
     min-height: 60%;
     border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;
@@ -65,7 +65,7 @@
     }
   }
 
-  [data-skeleton-product-tile-content] {
+  [data-product-tile-skeleton-content] {
     display: flex;
     flex-direction: row;
     align-items: flex-start;
@@ -96,7 +96,7 @@
       @include media(">=notebook") { height: 20%; }
     }
 
-    [data-skeleton-product-tile-text] {
+    [data-product-tile-skeleton-text] {
       width: 70%;
 
       @include media(">=tablet") {
@@ -115,14 +115,14 @@
 
       [data-element-variant="text"] { margin-bottom: var(--space-1); }
 
-      [data-skeleton-product-tile-price] {
+      [data-product-tile-skeleton-price] {
         width: 60%;
 
         @include media(">=tablet") { width: 100%; }
       }
     }
 
-    [data-skeleton-product-tile-badge] {
+    [data-product-tile-skeleton-badge] {
       position: absolute;
       right: var(--space-1);
       width: 20%;
diff --git a/src/components/skeletons/SkeletonProductTiles/SkeletonProductTiles.tsx b/src/components/skeletons/ProductTilesSkeleton/ProductTilesSkeleton.tsx
similarity index 72%
rename from src/components/skeletons/SkeletonProductTiles/SkeletonProductTiles.tsx
rename to src/components/skeletons/ProductTilesSkeleton/ProductTilesSkeleton.tsx
index f4b2f677e..806cab92a 100644
--- a/src/components/skeletons/SkeletonProductTiles/SkeletonProductTiles.tsx
+++ b/src/components/skeletons/ProductTilesSkeleton/ProductTilesSkeleton.tsx
@@ -2,14 +2,14 @@ import React from 'react'
 import type { PropsWithChildren } from 'react'
 import Tiles, { Tile } from 'src/components/ui/Tiles'
 
-import SkeletonProductTile from './SkeletonProductTile'
+import ProductTileSkeleton from './ProductTileSkeleton'
 
 interface Props {
   loading?: boolean
   variant?: 'vertical' | 'horizontal'
 }
 
-function SkeletonProductTiles({
+function ProductTilesSkeleton({
   children,
   loading = true,
   variant = 'vertical',
@@ -18,7 +18,7 @@ function SkeletonProductTiles({
     <Tiles>
       {Array.from({ length: 3 }, (_, index) => (
         <Tile key={String(index)}>
-          <SkeletonProductTile tileIndex={index + 1} variant={variant} />
+          <ProductTileSkeleton tileIndex={index + 1} variant={variant} />
         </Tile>
       ))}
     </Tiles>
@@ -27,4 +27,4 @@ function SkeletonProductTiles({
   )
 }
 
-export default SkeletonProductTiles
+export default ProductTilesSkeleton
diff --git a/src/components/skeletons/ProductTilesSkeleton/index.ts b/src/components/skeletons/ProductTilesSkeleton/index.ts
new file mode 100644
index 000000000..556abc08c
--- /dev/null
+++ b/src/components/skeletons/ProductTilesSkeleton/index.ts
@@ -0,0 +1 @@
+export { default } from './ProductTilesSkeleton'
diff --git a/src/components/skeletons/SkeletonFilter/index.ts b/src/components/skeletons/SkeletonFilter/index.ts
deleted file mode 100644
index 19687646f..000000000
--- a/src/components/skeletons/SkeletonFilter/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './SkeletonFilter'
diff --git a/src/components/skeletons/SkeletonProductCard/index.ts b/src/components/skeletons/SkeletonProductCard/index.ts
deleted file mode 100644
index ddd9333d8..000000000
--- a/src/components/skeletons/SkeletonProductCard/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './SkeletonProductCard'
diff --git a/src/components/skeletons/SkeletonProductGrid/index.ts b/src/components/skeletons/SkeletonProductGrid/index.ts
deleted file mode 100644
index b6c5dbbcc..000000000
--- a/src/components/skeletons/SkeletonProductGrid/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './SkeletonProductGrid'
diff --git a/src/components/skeletons/SkeletonProductShelf/index.ts b/src/components/skeletons/SkeletonProductShelf/index.ts
deleted file mode 100644
index 086e03a26..000000000
--- a/src/components/skeletons/SkeletonProductShelf/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './SkeletonProductShelf'
diff --git a/src/components/skeletons/SkeletonProductTiles/SkeletonProductTile/index.ts b/src/components/skeletons/SkeletonProductTiles/SkeletonProductTile/index.ts
deleted file mode 100644
index cfdf25f35..000000000
--- a/src/components/skeletons/SkeletonProductTiles/SkeletonProductTile/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './SkeletonProductTile'
diff --git a/src/components/skeletons/SkeletonProductTiles/index.ts b/src/components/skeletons/SkeletonProductTiles/index.ts
deleted file mode 100644
index 2f7407eea..000000000
--- a/src/components/skeletons/SkeletonProductTiles/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './SkeletonProductTiles'

From d380482fbf7fdacd5cf67247a75efc82861b00ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Feij=C3=B3?= <lucas.portela@vtex.com.br>
Date: Thu, 17 Feb 2022 15:34:53 -0300
Subject: [PATCH 33/42] Fix shimmer wrapper width

---
 src/components/skeletons/Shimmer/shimmer.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/skeletons/Shimmer/shimmer.scss b/src/components/skeletons/Shimmer/shimmer.scss
index e6beed90d..d4d32c135 100644
--- a/src/components/skeletons/Shimmer/shimmer.scss
+++ b/src/components/skeletons/Shimmer/shimmer.scss
@@ -6,7 +6,7 @@
   position: absolute;
   top: 0;
   left: 0;
-  width: 200vw;
+  width: 100vw;
   height: 100%;
   animation: loading 800ms infinite linear;
 
@@ -19,6 +19,6 @@
 }
 
 @keyframes loading {
-  0% { transform: translate3d(-100vw, 0, 0); }
+  0% { transform: translate3d(-50vw, 0, 0); }
   100% { transform: translate3d(0, 0, 0); }
 }

From b41b78f800b1a4e571974d79c3dfb37e10d8c2ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Feij=C3=B3?= <lucas.portela@vtex.com.br>
Date: Thu, 17 Feb 2022 17:06:06 -0300
Subject: [PATCH 34/42] Replace magic number by a temporary constant

---
 .../skeletons/ProductTilesSkeleton/ProductTilesSkeleton.tsx  | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/skeletons/ProductTilesSkeleton/ProductTilesSkeleton.tsx b/src/components/skeletons/ProductTilesSkeleton/ProductTilesSkeleton.tsx
index 806cab92a..cc5f5443a 100644
--- a/src/components/skeletons/ProductTilesSkeleton/ProductTilesSkeleton.tsx
+++ b/src/components/skeletons/ProductTilesSkeleton/ProductTilesSkeleton.tsx
@@ -4,6 +4,9 @@ import Tiles, { Tile } from 'src/components/ui/Tiles'
 
 import ProductTileSkeleton from './ProductTileSkeleton'
 
+// TODO: // Replace it when items number be dinamically defined
+const DEFAULT_ITEMS_NUMBER = 3
+
 interface Props {
   loading?: boolean
   variant?: 'vertical' | 'horizontal'
@@ -16,7 +19,7 @@ function ProductTilesSkeleton({
 }: PropsWithChildren<Props>) {
   return loading ? (
     <Tiles>
-      {Array.from({ length: 3 }, (_, index) => (
+      {Array.from({ length: DEFAULT_ITEMS_NUMBER }, (_, index) => (
         <Tile key={String(index)}>
           <ProductTileSkeleton tileIndex={index + 1} variant={variant} />
         </Tile>

From f60604e21061b8efdfa26bd842a68f7c1d16a8e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Feij=C3=B3?= <lucas.portela@vtex.com.br>
Date: Fri, 18 Feb 2022 16:00:25 -0300
Subject: [PATCH 35/42] Add new color token for skeleton's background

---
 src/components/skeletons/SkeletonElement/skeleton-element.scss | 2 +-
 src/styles/colors.scss                                         | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/skeletons/SkeletonElement/skeleton-element.scss b/src/components/skeletons/SkeletonElement/skeleton-element.scss
index 6053003a3..def2b1bdb 100644
--- a/src/components/skeletons/SkeletonElement/skeleton-element.scss
+++ b/src/components/skeletons/SkeletonElement/skeleton-element.scss
@@ -6,7 +6,7 @@
 
   [data-skeleton-element-content] {
     overflow: hidden;
-    background: var(--color-neutral-2);
+    background: var(--bg-skeleton-loading);
     border-radius: var(--border-radius-default);
 
     &[data-element-variant="text"] {
diff --git a/src/styles/colors.scss b/src/styles/colors.scss
index 89ca59480..36378234a 100644
--- a/src/styles/colors.scss
+++ b/src/styles/colors.scss
@@ -38,6 +38,7 @@
   --bg-disabled: var(--color-neutral-2);
   --bg-focus-ring: var(--color-emphasis);
   --bg-selected-outline: var(--color-emphasis-transparent-80);
+  --bg-skeleton-loading: var(--bg-disabled);
 
   // Backgrounds – Contextual
   --bg-success: var(--color-success);

From 6a326feca81c7fec744038c0c5aae2f4abdd6473 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Feij=C3=B3?= <lucas.portela@vtex.com.br>
Date: Fri, 18 Feb 2022 16:20:56 -0300
Subject: [PATCH 36/42] Use function for skeleton components

---
 .../skeletons/ProductCardSkeleton/ProductCardSkeleton.tsx     | 4 ++--
 .../ProductTileSkeleton/ProductTileSkeleton.tsx               | 4 ++--
 src/components/skeletons/Shimmer/Shimmer.tsx                  | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/skeletons/ProductCardSkeleton/ProductCardSkeleton.tsx b/src/components/skeletons/ProductCardSkeleton/ProductCardSkeleton.tsx
index e83031627..29dbd24bb 100644
--- a/src/components/skeletons/ProductCardSkeleton/ProductCardSkeleton.tsx
+++ b/src/components/skeletons/ProductCardSkeleton/ProductCardSkeleton.tsx
@@ -11,12 +11,12 @@ interface Props {
   variant?: 'vertical' | 'horizontal'
 }
 
-const ProductCardSkeleton = ({
+function ProductCardSkeleton({
   bordered,
   sectioned = false,
   showActions = false,
   variant = 'vertical',
-}: Props) => {
+}: Props) {
   return (
     <div
       data-store-product-card-skeleton
diff --git a/src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/ProductTileSkeleton.tsx b/src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/ProductTileSkeleton.tsx
index 5755c7220..9e0e89205 100644
--- a/src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/ProductTileSkeleton.tsx
+++ b/src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/ProductTileSkeleton.tsx
@@ -9,11 +9,11 @@ interface Props {
   variant?: 'vertical' | 'horizontal'
 }
 
-const ProductTileSkeleton = ({
+function ProductTileSkeleton({
   tileIndex,
   bordered,
   variant = 'vertical',
-}: Props) => {
+}: Props) {
   return (
     <div
       data-store-product-tile-skeleton
diff --git a/src/components/skeletons/Shimmer/Shimmer.tsx b/src/components/skeletons/Shimmer/Shimmer.tsx
index c67116ec7..a1110c320 100644
--- a/src/components/skeletons/Shimmer/Shimmer.tsx
+++ b/src/components/skeletons/Shimmer/Shimmer.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 
 import './shimmer.scss'
 
-const Shimmer = () => {
+function Shimmer() {
   return (
     <div data-store-shimmer>
       <div data-shimmer />

From 9f9841e531071f4b71068a17770a77ef79082004 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Feij=C3=B3?= <lucas.portela@vtex.com.br>
Date: Fri, 18 Feb 2022 16:35:32 -0300
Subject: [PATCH 37/42] Apply suggestions from code review

Co-authored-by: Fanny Chien <fannychienn@gmail.com>
---
 CHANGELOG.md                                                    | 2 +-
 src/components/skeletons/FilterSkeleton/filter-skeleton.scss    | 2 +-
 .../skeletons/ProductCardSkeleton/product-card-skeleton.scss    | 2 +-
 .../ProductTileSkeleton/product-tile-skeleton.scss              | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0382fa88c..db0e3725a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,7 +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.
+- `Skeleton` loading components.
 
 ### Changed
 - Replaces page type redirects, a.k.a. `/account`, `/login` to a corresponding file in `/pages` folder
diff --git a/src/components/skeletons/FilterSkeleton/filter-skeleton.scss b/src/components/skeletons/FilterSkeleton/filter-skeleton.scss
index 5dfed0c33..ffffaa89b 100644
--- a/src/components/skeletons/FilterSkeleton/filter-skeleton.scss
+++ b/src/components/skeletons/FilterSkeleton/filter-skeleton.scss
@@ -1,4 +1,4 @@
-@import "../../../styles/scaffold";
+@import "src/styles/scaffold";
 
 [data-store-filter-skeleton] {
   margin-top: var(--space-1);
diff --git a/src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss b/src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss
index 4a633cedb..4185d7392 100644
--- a/src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss
+++ b/src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss
@@ -1,4 +1,4 @@
-@import "../../../styles/scaffold";
+@import "src/styles/scaffold";
 
 [data-store-product-card-skeleton] {
   position: relative;
diff --git a/src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/product-tile-skeleton.scss b/src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/product-tile-skeleton.scss
index 1f36a8ee3..eb13ef4f1 100644
--- a/src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/product-tile-skeleton.scss
+++ b/src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/product-tile-skeleton.scss
@@ -1,4 +1,4 @@
-@import "../../../../styles/vendors/include-media.scss";
+@import "src/styles/scaffold";
 
 [data-store-product-tile-skeleton] {
   position: relative;

From 404f8419d4f7e6d3190f5d213a206118ff5d8b40 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Feij=C3=B3?= <lucas.portela@vtex.com.br>
Date: Fri, 18 Feb 2022 16:51:21 -0300
Subject: [PATCH 38/42] Trigger CI with an empty commit


From 77546240c009546cf9bf01d357e93e019564dd90 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Feij=C3=B3?= <lucas.portela@vtex.com.br>
Date: Fri, 18 Feb 2022 17:50:22 -0300
Subject: [PATCH 39/42] Remove unnecessary optional chaining operators

---
 src/components/product/ProductGrid/ProductGrid.tsx    | 2 +-
 src/components/sections/ProductShelf/ProductShelf.tsx | 2 +-
 src/components/sections/ProductTiles/ProductTiles.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/product/ProductGrid/ProductGrid.tsx b/src/components/product/ProductGrid/ProductGrid.tsx
index c28fb45a3..e929b397e 100644
--- a/src/components/product/ProductGrid/ProductGrid.tsx
+++ b/src/components/product/ProductGrid/ProductGrid.tsx
@@ -13,7 +13,7 @@ interface Props {
 
 function ProductGrid({ products, page, pageSize }: Props) {
   return (
-    <ProductGridSkeleton loading={products?.length === 0}>
+    <ProductGridSkeleton loading={products.length === 0}>
       <ul className="product-grid">
         {products.map((product, idx) => (
           <li key={`${product.id}`}>
diff --git a/src/components/sections/ProductShelf/ProductShelf.tsx b/src/components/sections/ProductShelf/ProductShelf.tsx
index edd20eef6..4e1245519 100644
--- a/src/components/sections/ProductShelf/ProductShelf.tsx
+++ b/src/components/sections/ProductShelf/ProductShelf.tsx
@@ -12,7 +12,7 @@ interface ProductShelfProps {
 
 function ProductShelf({ products }: ProductShelfProps) {
   return (
-    <ProductShelfSkeleton loading={products?.length === 0}>
+    <ProductShelfSkeleton loading={products.length === 0}>
       <ul data-product-shelf className="grid-content">
         {products.map((product, idx) => (
           <li key={`${product.id}`}>
diff --git a/src/components/sections/ProductTiles/ProductTiles.tsx b/src/components/sections/ProductTiles/ProductTiles.tsx
index ffce43b24..fdfa07210 100644
--- a/src/components/sections/ProductTiles/ProductTiles.tsx
+++ b/src/components/sections/ProductTiles/ProductTiles.tsx
@@ -27,7 +27,7 @@ const getRatio = (products: number, idx: number) => {
 
 const ProductTiles = ({ products }: TilesProps) => {
   return (
-    <ProductTilesSkeleton variant="horizontal" loading={products?.length === 0}>
+    <ProductTilesSkeleton variant="horizontal" loading={products.length === 0}>
       <Tiles>
         {products.map((product, idx) => (
           <Tile key={product.id}>

From 74877026927ce6e6286e59930e1b400c3b98bc0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Feij=C3=B3?= <lucas.portela@vtex.com.br>
Date: Fri, 18 Feb 2022 18:41:00 -0300
Subject: [PATCH 40/42] Trigger CI with an empty commit


From 6d0ee04fa9990246d9b168388b305b15578c993e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Feij=C3=B3?= <lucas.portela@vtex.com.br>
Date: Fri, 18 Feb 2022 23:51:53 -0300
Subject: [PATCH 41/42] Use `PropsWithChildren` instead get `children` as prop

---
 .../skeletons/FilterSkeleton/FilterSkeleton.tsx          | 9 ++++++---
 .../skeletons/SkeletonElement/SkeletonElement.tsx        | 6 +++---
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/skeletons/FilterSkeleton/FilterSkeleton.tsx b/src/components/skeletons/FilterSkeleton/FilterSkeleton.tsx
index 9d70588d0..c3642b055 100644
--- a/src/components/skeletons/FilterSkeleton/FilterSkeleton.tsx
+++ b/src/components/skeletons/FilterSkeleton/FilterSkeleton.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import type { PropsWithChildren } from 'react'
 
 import Shimmer from '../Shimmer'
 import SkeletonElement from '../SkeletonElement'
@@ -6,10 +7,12 @@ import './filter-skeleton.scss'
 
 interface Props {
   loading?: boolean
-  children?: JSX.Element
 }
 
-function FilterSkeleton({ children, loading = true }: Props) {
+function FilterSkeleton({
+  children,
+  loading = true,
+}: PropsWithChildren<Props>) {
   return loading ? (
     <div data-store-filter-skeleton>
       <SkeletonElement shimmer type="text" />
@@ -22,7 +25,7 @@ function FilterSkeleton({ children, loading = true }: Props) {
       </div>
     </div>
   ) : (
-    children ?? null
+    <>{children}</>
   )
 }
 
diff --git a/src/components/skeletons/SkeletonElement/SkeletonElement.tsx b/src/components/skeletons/SkeletonElement/SkeletonElement.tsx
index b56bef7a7..97ca2916c 100644
--- a/src/components/skeletons/SkeletonElement/SkeletonElement.tsx
+++ b/src/components/skeletons/SkeletonElement/SkeletonElement.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import type { PropsWithChildren } from 'react'
 
 import Shimmer from '../Shimmer'
 
@@ -10,7 +11,6 @@ interface Props {
   loading?: boolean
   shimmer?: boolean
   type: ElementVariant
-  children?: JSX.Element
 }
 
 function SkeletonElement({
@@ -18,14 +18,14 @@ function SkeletonElement({
   children,
   loading = true,
   shimmer = false,
-}: Props) {
+}: PropsWithChildren<Props>) {
   return loading ? (
     <div data-store-skeleton-element data-shimmer={shimmer}>
       <div data-skeleton-element-content data-element-variant={type} />
       {shimmer && <Shimmer />}
     </div>
   ) : (
-    children ?? null
+    <>{children}</>
   )
 }
 

From 15cd92eb9e7a32ba271ad759232b0568cf34d7ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Feij=C3=B3?= <lucas.portela@vtex.com.br>
Date: Mon, 21 Feb 2022 13:11:34 -0300
Subject: [PATCH 42/42] Check css classes after applying skeletons

---
 .../sections/ProductGallery/ProductGallery.tsx   | 16 ++++++++--------
 .../sections/ProductGallery/product-gallery.scss | 15 ---------------
 2 files changed, 8 insertions(+), 23 deletions(-)

diff --git a/src/components/sections/ProductGallery/ProductGallery.tsx b/src/components/sections/ProductGallery/ProductGallery.tsx
index 9c7e2142b..c7116339a 100644
--- a/src/components/sections/ProductGallery/ProductGallery.tsx
+++ b/src/components/sections/ProductGallery/ProductGallery.tsx
@@ -94,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}
@@ -104,11 +104,11 @@ function ProductGallery({ title, slug }: Props) {
                   page={page}
                   title={title}
                 />
-              ))
-            ) : (
-              <ProductGrid page={0} pageSize={0} products={[]} />
-            )}
-          </div>
+              ))}
+            </>
+          ) : (
+            <ProductGrid page={0} pageSize={0} products={[]} />
+          )}
 
           {/* Prefetch Previous and Next pages */}
           {prev !== false && (
diff --git a/src/components/sections/ProductGallery/product-gallery.scss b/src/components/sections/ProductGallery/product-gallery.scss
index 483ffebf4..052b3ffc1 100644
--- a/src/components/sections/ProductGallery/product-gallery.scss
+++ b/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;
@@ -107,7 +93,6 @@
   }
 }
 
-// Check it after apply Skeletons.
 .product-listing__results {
   --padding: var(--space-1);