skeletonNewsBlock

src/widgets/NewsBlock/NewsBlockSkeleton/NewsBlockSkeleton.module.scss

@@ -0,0 +1,19 @@
+.skeletonNewsCard {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    background-color: #f0f0f0;
+    border-radius: 8px;
+    overflow: hidden;
+    margin-bottom: 16px;
+  }
+
+  .content {
+    padding: 16px;
+  }
+
+  .content > div {
+    margin-bottom: 8px;
+  }
+

src/widgets/NewsBlock/NewsBlockSkeleton/NewsBlockSkeleton.tsx

@@ -0,0 +1,19 @@
+import { FC } from 'react'
+import Skeleton from 'react-loading-skeleton'
+import 'react-loading-skeleton/dist/skeleton.css'
+
+import styles from './NewsBlockSkeleton.module.scss'
+
+const NewsBlockSkeleton: FC = () => {
+  return (
+    <div className={styles.skeletonNewsCard}>
+      <Skeleton height={180} />
+      <div className={styles.content}>
+        <Skeleton width={`60%`} />
+        <Skeleton width={`80%`} />
+      </div>
+    </div>
+  )
+}
+
+export default NewsBlockSkeleton

src/widgets/NewsBlock/ui/NewsBlock.tsx

@@ -11,6 +11,7 @@ import Scroll from '@/shared/ui/Scroll/Scroll'
 import { getShopNewsSelector } from '../model/selectors/selectors'
 import { getShopNews } from '../model/services/getShopNews'
 import { ShopNewsData } from '../model/types/types'
+import NewsBlockSkeleton from '../NewsBlockSkeleton/NewsBlockSkeleton'
 
 import styles from './NewsBlock.module.scss'
 
@@ -36,9 +37,17 @@ const NewsBlock: FC = () => {
           </Link>
         </article>
         <Scroll>
-          {news.map(item => (
-            <NewsCard key={item.id} id={item.id} image={item.image} date={item.pub_date} title={item.title} />
-          ))}
+          {news.length === 0
+            ? Array.from({ length: 5 }).map((_, index) => <NewsBlockSkeleton key={index} />)
+            : news.map(item => (
+                <NewsCard
+                  key={item.id}
+                  id={item.id}
+                  image={item.image}
+                  date={item.pub_date}
+                  title={item.title}
+                />
+              ))}
         </Scroll>
       </section>
     )