From 71764af45fd304e3371a0c5bec047368b91a6209 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <f.katurov@rogii.com>
Date: Mon, 5 Dec 2022 18:08:35 +0600
Subject: [PATCH] added lazy loading to flow hero

---
 src/components/flow/FlowSwiperHero/index.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/flow/FlowSwiperHero/index.tsx b/src/components/flow/FlowSwiperHero/index.tsx
index dfc67e6f..4aa6ddb8 100644
--- a/src/components/flow/FlowSwiperHero/index.tsx
+++ b/src/components/flow/FlowSwiperHero/index.tsx
@@ -29,8 +29,11 @@ const autoplay = {
 };
 
 const lazy = {
-  loadPrevNextAmount: 3,
-  checkInView: false,
+  enabled: true,
+  loadPrevNextAmount: 2,
+  loadOnTransitionStart: true,
+  loadPrevNext: true,
+  checkInView: true,
 };
 
 export const FlowSwiperHero: FC<Props> = ({ heroes }) => {
@@ -130,13 +133,14 @@ export const FlowSwiperHero: FC<Props> = ({ heroes }) => {
         onClick={onClick}
         followFinger
         shortSwipes={false}
+        watchSlidesProgress
       >
         {heroes
-          .filter(node => node.thumbnail)
-          .map(node => (
+          .filter((node) => node.thumbnail)
+          .map((node) => (
             <SwiperSlide key={node.id}>
               <img
-                src={getURLFromString(node.thumbnail!, preset)}
+                data-src={getURLFromString(node.thumbnail!, preset)}
                 alt=""
                 className={classNames(styles.preview, 'swiper-lazy')}
               />