muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-24 20:36:40 +07:00
Code Packages Activity Actions

added lazy loading for heroes

Browse source
This commit is contained in:
Fedor Katurov 2021-10-07 14:24:08 +07:00
parent 330e233869
commit 7d6f35b0af
2 changed files with 8 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/components/flow/FlowSwiperHero/index.tsx
View file

@ -13,6 +13,7 @@ import { PRESETS, URLS } from '~/constants/urls';
import SwiperClass from 'swiper/types/swiper-class'; import SwiperClass from 'swiper/types/swiper-class';
import { LoaderCircle } from '~/components/input/LoaderCircle'; import { LoaderCircle } from '~/components/input/LoaderCircle';
import { useHistory } from 'react-router'; import { useHistory } from 'react-router';
import classNames from 'classnames';
SwiperCore.use([EffectFade, Lazy, Autoplay, Navigation]); SwiperCore.use([EffectFade, Lazy, Autoplay, Navigation]);
@ -98,7 +99,9 @@ export const FlowSwiperHero: FC<Props> = ({ heroes }) => {
effect="fade" effect="fade"
speed={3000} speed={3000}
className={styles.swiper} className={styles.swiper}
lazy lazy={{
loadPrevNextAmount: 3,
}}
loop loop
slidesPerView={1} slidesPerView={1}
autoplay={{ autoplay={{
@ -119,9 +122,9 @@ export const FlowSwiperHero: FC<Props> = ({ heroes }) => {
.map(node => ( .map(node => (
<SwiperSlide key={node.id}> <SwiperSlide key={node.id}>
<img <img
src={getURLFromString(node.thumbnail!, preset)} data-src={getURLFromString(node.thumbnail!, preset)}
alt="" alt=""
className={styles.preview} className={classNames(styles.preview, 'swiper-lazy')}
/> />
</SwiperSlide> </SwiperSlide>
))} ))}

4
src/components/flow/FlowSwiperHero/styles.module.scss
View file

@ -111,10 +111,10 @@ img.preview {
word-break: break-word; word-break: break-word;
@include tablet { @include tablet {
@include clamp(3, 1.2 * 32px); @include clamp(3, 3.6em);
white-space: initial; white-space: initial;
word-wrap: break-word; word-wrap: break-word;
font: $font_32_bold; font: $font_24_bold;
max-height: 3.6em; max-height: 3.6em;
} }