From 5ed3f3b25265bc652250e6fe7e27cdb67365a82b Mon Sep 17 00:00:00 2001
From: Kseniya <ksuta_marfa@mil.ru>
Date: Mon, 17 Jun 2024 08:29:16 +0300
Subject: [PATCH] ViewedProductsSkeleton

---
 .../ViewedProductsSkeleton.module.scss        | 16 +++++++++++
 .../ViewedProductsSkeleton.tsx                | 15 +++++++++++
 .../ViewedProducts/ui/ViewedProducts.tsx      | 27 ++++++++++---------
 3 files changed, 46 insertions(+), 12 deletions(-)
 create mode 100644 src/widgets/ViewedProducts/ViewedProductsSkeleton/ViewedProductsSkeleton.module.scss
 create mode 100644 src/widgets/ViewedProducts/ViewedProductsSkeleton/ViewedProductsSkeleton.tsx

diff --git a/src/widgets/ViewedProducts/ViewedProductsSkeleton/ViewedProductsSkeleton.module.scss b/src/widgets/ViewedProducts/ViewedProductsSkeleton/ViewedProductsSkeleton.module.scss
new file mode 100644
index 00000000..a82da424
--- /dev/null
+++ b/src/widgets/ViewedProducts/ViewedProductsSkeleton/ViewedProductsSkeleton.module.scss
@@ -0,0 +1,16 @@
+.skeletonViewedProductsCard {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 160px;
+    height: 100%;
+    background-color: #f0f0f0;
+    border-radius: 8px;
+    overflow: hidden;
+    margin:0;
+  
+    & > *:not(:last-child) {
+      margin-bottom: 8px;
+    }
+  }
+  
\ No newline at end of file
diff --git a/src/widgets/ViewedProducts/ViewedProductsSkeleton/ViewedProductsSkeleton.tsx b/src/widgets/ViewedProducts/ViewedProductsSkeleton/ViewedProductsSkeleton.tsx
new file mode 100644
index 00000000..f4b03466
--- /dev/null
+++ b/src/widgets/ViewedProducts/ViewedProductsSkeleton/ViewedProductsSkeleton.tsx
@@ -0,0 +1,15 @@
+import { FC } from 'react'
+import Skeleton from 'react-loading-skeleton'
+import 'react-loading-skeleton/dist/skeleton.css'
+
+import styles from './ViewedProductsSkeleton.module.scss'
+
+const ViewedProductsSkeleton: FC = () => {
+  return (
+    <div className={styles.skeletonViewedProductsCard}>
+      <Skeleton width="100%" height={240} />
+    </div>
+  )
+}
+
+export default ViewedProductsSkeleton
diff --git a/src/widgets/ViewedProducts/ui/ViewedProducts.tsx b/src/widgets/ViewedProducts/ui/ViewedProducts.tsx
index 561006f8..a2070e91 100644
--- a/src/widgets/ViewedProducts/ui/ViewedProducts.tsx
+++ b/src/widgets/ViewedProducts/ui/ViewedProducts.tsx
@@ -7,6 +7,7 @@ import Scroll from '@/shared/ui/Scroll/Scroll'
 import { ProductItem } from '@/widgets/ProductItem/ProductItem'
 
 import { getViewedProductsFromStorage } from '../model/functions/functions'
+import ViewedProductsSkeleton from '../ViewedProductsSkeleton/ViewedProductsSkeleton'
 
 import styles from './ViewedProducts.module.scss'
 
@@ -28,7 +29,7 @@ const ViewedProducts: FC<IViewedProductsProps> = ({ title, hasLabel }) => {
     /*TODO по FSD нельзя использовать widget ProductItem в widget, нужно перенести ProductItem в features или entities*/
   }
   const productList = viewedProducts.map((item, index) => {
-    if (hasLabel && index > VIEWED_PRODUCTS_COUNT_ON_MAIN) return
+    if (hasLabel && index > VIEWED_PRODUCTS_COUNT_ON_MAIN) return null
 
     return (
       <ProductItem
@@ -50,17 +51,19 @@ const ViewedProducts: FC<IViewedProductsProps> = ({ title, hasLabel }) => {
   })
 
   return (
-    viewedProducts?.length !== 0 && (
-      <section className={styles.viewedproducts}>
-        <div className={styles.viewedproducts__header}>
-          <Heading className={styles.viewedproducts__title}>{title}</Heading>
-          {hasLabel && <span className={styles.viewedproducts__label}>Вы смотрели</span>}
-        </div>
-        <Scroll className={styles.viewedproducts__scroll} withManualGrip={true}>
-          {productList}
-        </Scroll>
-      </section>
-    )
+    <section className={styles.viewedproducts}>
+      <div className={styles.viewedproducts__header}>
+        <Heading className={styles.viewedproducts__title}>{title}</Heading>
+        {hasLabel && <span className={styles.viewedproducts__label}>Вы смотрели</span>}
+      </div>
+      <Scroll className={styles.viewedproducts__scroll} withManualGrip={true}>
+        {viewedProducts?.length !== 0
+          ? productList
+          : Array.from({ length: VIEWED_PRODUCTS_COUNT_ON_MAIN }).map((_, index) => (
+              <ViewedProductsSkeleton key={index} />
+            ))}
+      </Scroll>
+    </section>
   )
 }