From 7d6f35b0af52b49b5308389a3b7539267e0b6dba Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Thu, 7 Oct 2021 14:24:08 +0700
Subject: [PATCH] added lazy loading for heroes

---
 src/components/flow/FlowSwiperHero/index.tsx          | 9 ++++++---
 src/components/flow/FlowSwiperHero/styles.module.scss | 4 ++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/flow/FlowSwiperHero/index.tsx b/src/components/flow/FlowSwiperHero/index.tsx
index 84f7b7cb..78ffae59 100644
--- a/src/components/flow/FlowSwiperHero/index.tsx
+++ b/src/components/flow/FlowSwiperHero/index.tsx
@@ -13,6 +13,7 @@ import { PRESETS, URLS } from '~/constants/urls';
 import SwiperClass from 'swiper/types/swiper-class';
 import { LoaderCircle } from '~/components/input/LoaderCircle';
 import { useHistory } from 'react-router';
+import classNames from 'classnames';
 
 SwiperCore.use([EffectFade, Lazy, Autoplay, Navigation]);
 
@@ -98,7 +99,9 @@ export const FlowSwiperHero: FC<Props> = ({ heroes }) => {
         effect="fade"
         speed={3000}
         className={styles.swiper}
-        lazy
+        lazy={{
+          loadPrevNextAmount: 3,
+        }}
         loop
         slidesPerView={1}
         autoplay={{
@@ -119,9 +122,9 @@ export const FlowSwiperHero: FC<Props> = ({ heroes }) => {
           .map(node => (
             <SwiperSlide key={node.id}>
               <img
-                src={getURLFromString(node.thumbnail!, preset)}
+                data-src={getURLFromString(node.thumbnail!, preset)}
                 alt=""
-                className={styles.preview}
+                className={classNames(styles.preview, 'swiper-lazy')}
               />
             </SwiperSlide>
           ))}
diff --git a/src/components/flow/FlowSwiperHero/styles.module.scss b/src/components/flow/FlowSwiperHero/styles.module.scss
index e72bf0da..a06a8b0a 100644
--- a/src/components/flow/FlowSwiperHero/styles.module.scss
+++ b/src/components/flow/FlowSwiperHero/styles.module.scss
@@ -111,10 +111,10 @@ img.preview {
   word-break: break-word;
 
   @include tablet {
-    @include clamp(3, 1.2 * 32px);
+    @include clamp(3, 3.6em);
     white-space: initial;
     word-wrap: break-word;
-    font: $font_32_bold;
+    font: $font_24_bold;
     max-height: 3.6em;
   }