placeholder & opacity img lazy load

src/App.tsx

@@ -8,7 +8,7 @@ import ScrollToTop from "./hooks/ScrollToTop";
 import "swiper/swiper.css";
 import "swiper/css/pagination";
 import "swiper/css/navigation";
-import "react-lazy-load-image-component/src/effects/blur.css";
+import "react-lazy-load-image-component/src/effects/opacity.css";
 import "react-calendar/dist/Calendar.css";
 import "./styles/style.scss";
 

src/components/aside/AsideNews.tsx

@@ -2,7 +2,8 @@
 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";
+// import { ReactComponent as ArrRight } from "../../assets/icons/arrow-right.svg";
+import placeholder from "../../assets/images/placeholder.webp";
 // Components
 import NewsCategory from "../global/NewsCategory";
 import NewsDate from "../global/NewsDate";
@@ -24,7 +25,8 @@ const AsideNews = ({ title, date, img, category, link }: Props) => {
             src={img}
             alt={img}
             useIntersectionObserver
-            effect="blur"
+            effect="opacity"
+            placeholderSrc={placeholder}
           />
         </div>
         <div className="aside-news-info">

src/components/category/MainImg.tsx

@@ -3,6 +3,7 @@ import { LazyLoadImage } from "react-lazy-load-image-component";
 import { Link } from "react-router-dom";
 import { useSelector } from "react-redux";
 import { v4 as uuidv4 } from "uuid";
+import placeholder from "../../assets/images/placeholder.webp";
 
 // Types
 import { RootState } from "../../types/store.types";
@@ -18,6 +19,7 @@ const MainImg = () => {
         data[0].id > -1 ? (
           <Link to={`/news/${data[0].id}`} className="main-img">
             <LazyLoadImage
+              placeholderSrc={placeholder}
               src={
                 (data[0].featured_images.length > 0
                   ? data[0].featured_images[0].path
@@ -29,7 +31,7 @@ const MainImg = () => {
                   : "") as string
               }
               useIntersectionObserver
-              effect="blur"
+              effect="opacity"
             />
 
             <div className="main-img-overlay">

src/components/main/ContentItem.tsx

@@ -1,6 +1,7 @@
 // Modules
 import { LazyLoadImage } from "react-lazy-load-image-component";
 import { Link } from "react-router-dom";
+import placeholder from "../../assets/images/placeholder.webp";
 
 interface IProps {
   type?: "small" | "big";
@@ -15,8 +16,9 @@ const ContentItem = ({ type = "small", img, title, id }: IProps) => {
       <LazyLoadImage
         src={img}
         alt={img}
-        effect="blur"
+        effect="opacity"
         useIntersectionObserver
+        placeholderSrc={placeholder}
         style={{
           backgroundImage: `url(${img})`,
           backgroundRepeat: "no-repeat",

src/components/news/News.tsx

@@ -7,6 +7,7 @@ import { v4 as uuidv4 } from "uuid";
 import NewsCategory from "../global/NewsCategory";
 import NewsDate from "../global/NewsDate";
 import { IPostsData } from "../../types/data.types";
+import placeholder from "../../assets/images/placeholder.webp";
 
 interface Props {
   id: IPostsData["id"];
@@ -26,7 +27,8 @@ const News = ({ id, title, text, categories, date, img }: Props) => {
             src={img}
             alt={img}
             useIntersectionObserver
-            effect="blur"
+            effect="opacity"
+            placeholderSrc={placeholder}
           />
         </div>
         <div className="news-info">

src/components/news/NewsArticleImg.tsx

@@ -1,4 +1,5 @@
 // Modules
+import placeholder from "../../assets/images/placeholder.webp";
 import { LazyLoadImage } from "react-lazy-load-image-component";
 
 interface IProps {
@@ -9,10 +10,12 @@ const NewsArticleImg = ({ img }: IProps) => {
   return (
     <div className={"news-article-image"}>
       <LazyLoadImage
+        delayMethod="debounce"
         src={img}
         alt={img}
-        effect="blur"
+        effect="opacity"
         useIntersectionObserver
+        placeholderSrc={placeholder}
       />
     </div>
   );