Add ProductTiles skeleton

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[]
@@ -30,25 +30,21 @@ const ProductTiles = ({ products }: TilesProps) => {
   }
 
   return (
-    <Tiles>
-      {haveProducts
-        ? products.map((product, idx) => (
-            <Tile key={`${product.id}`}>
-              <ProductCard
-                data-testid="tile-card"
-                product={product}
-                index={idx + 1}
-                variant="horizontal"
-                ratio={getRatio(idx)}
-              />
-            </Tile>
-          ))
-        : Array.from({ length: 3 }, (_, index) => (
-            <Tile key={String(index)}>
-              <SkeletonProductTile tileIndex={index + 1} variant="horizontal" />
-            </Tile>
-          ))}
-    </Tiles>
+    <SkeletonProductTiles variant="horizontal" loading={!haveProducts}>
+      <Tiles>
+        {products.map((product, idx) => (
+          <Tile key={`${product.id}`}>
+            <ProductCard
+              data-testid="tile-card"
+              product={product}
+              index={idx + 1}
+              variant="horizontal"
+              ratio={getRatio(idx)}
+            />
+          </Tile>
+        ))}
+      </Tiles>
+    </SkeletonProductTiles>
   )
 }
 

src/components/skeletons/SkeletonProductTile/SkeletonProductTile.tsx → 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 {

src/components/skeletons/SkeletonProductTile/skeleton-product-tile.scss → 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;

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

src/components/skeletons/SkeletonProductTiles/index.ts

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