From c919b7491138c836de4e38e42cfe4513862fbd24 Mon Sep 17 00:00:00 2001
From: Kakabay <kashyrberdyew@gmail.com>
Date: Tue, 31 Jan 2023 16:09:16 +0500
Subject: [PATCH] lazy loading added to the news scrool

---
 src/components/news/News.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/news/News.tsx b/src/components/news/News.tsx
index 7fb0b52..ed70a24 100644
--- a/src/components/news/News.tsx
+++ b/src/components/news/News.tsx
@@ -1,5 +1,6 @@
 // Modules
 import { Link } from 'react-router-dom';
+import { LazyLoadImage } from 'react-lazy-load-image-component';
 // Images
 import { ReactComponent as ArrRight } from '../../assets/icons/arrow-right.svg';
 // Components
@@ -20,13 +21,13 @@ const News = ({ title, text, category, date, img, link }: Props) => {
     <div className="news">
       <div className="news-wrapper">
         <div className="news-image">
-          <img src={img} alt="img" />
+          <LazyLoadImage src={img} alt="image" useIntersectionObserver effect="blur" />
         </div>
         <div className="news-info">
           <div className="news-info-inner">
             <h2 className="news-title">{title}</h2>
             <div className="news-status">
-              <NewsCategory title="Политика" link="" />
+              <NewsCategory title={category} link="" />
               <NewsDate date={date} />
             </div>
             <div className="news-text">{text}</div>