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

#38 fixed preloader

Browse source
This commit is contained in:
Fedor Katurov 2021-06-21 14:00:21 +07:00
parent 85419e0ac1
commit d0989ac58b
2 changed files with 23 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/components/node/NodeImageSwiperBlock/index.tsx
View file

@ -5,18 +5,20 @@ import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper.scss'; import 'swiper/swiper.scss';
import 'swiper/components/pagination/pagination.scss'; import 'swiper/components/pagination/pagination.scss';
import 'swiper/components/navigation/navigation.scss'; import 'swiper/components/navigation/navigation.scss';
import 'swiper/components/lazy/lazy.min.css';
import styles from './styles.module.scss'; import styles from './styles.module.scss';
import SwiperCore, { Keyboard, Navigation, Pagination, SwiperOptions } from 'swiper'; import SwiperCore, { Keyboard, Navigation, Pagination, SwiperOptions, Lazy } from 'swiper';
import { useNodeImages } from '~/utils/hooks/node/useNodeImages'; import { useNodeImages } from '~/utils/hooks/node/useNodeImages';
import { getURL } from '~/utils/dom';
import { PRESETS } from '~/constants/urls';
import SwiperClass from 'swiper/types/swiper-class'; import SwiperClass from 'swiper/types/swiper-class';
import { modalShowPhotoswipe } from '~/redux/modal/actions'; import { modalShowPhotoswipe } from '~/redux/modal/actions';
import { useDispatch } from 'react-redux'; import { useDispatch } from 'react-redux';
import classNames from 'classnames';
import { getURL } from '~/utils/dom';
import { PRESETS } from '~/constants/urls';
SwiperCore.use([Navigation, Pagination, Keyboard]); SwiperCore.use([Lazy, Navigation, Pagination, Keyboard]);
interface IProps extends INodeComponentProps {} interface IProps extends INodeComponentProps {}
@ -78,6 +80,7 @@ const NodeImageSwiperBlock: FC<IProps> = ({ node }) => {
watchOverflow watchOverflow
updateOnImagesReady updateOnImagesReady
onInit={resetSwiper} onInit={resetSwiper}
lazy
keyboard={{ keyboard={{
enabled: true, enabled: true,
onlyInViewport: false, onlyInViewport: false,
@ -90,12 +93,19 @@ const NodeImageSwiperBlock: FC<IProps> = ({ node }) => {
{images.map(file => ( {images.map(file => (
<SwiperSlide className={styles.slide} key={file.id}> <SwiperSlide className={styles.slide} key={file.id}>
<img <img
className={styles.image} className={classNames('swiper-lazy', styles.image)}
src={getURL(file, PRESETS['1600'])} data-src={getURL(file, PRESETS['1600'])}
alt={node.title} alt={node.title}
onLoad={updateSwiper} onLoad={updateSwiper}
onClick={onOpenPhotoSwipe} onClick={onOpenPhotoSwipe}
/> />
<div
className={classNames(
'swiper-lazy-preloader swiper-lazy-preloader-white',
styles.loader
)}
/>
</SwiperSlide> </SwiperSlide>
))} ))}
</Swiper> </Swiper>

7
src/components/node/NodeImageSwiperBlock/styles.module.scss
View file

@ -98,6 +98,11 @@
border-radius: $radius; border-radius: $radius;
transition: box-shadow 1s; transition: box-shadow 1s;
box-shadow: transparentize(black, 0.7) 0 3px 5px; box-shadow: transparentize(black, 0.7) 0 3px 5px;
opacity: 0;
&[src] {
opacity: 1;
}
:global(.swiper-slide-active) & { :global(.swiper-slide-active) & {
box-shadow: transparentize(black, 0.9) 0 10px 5px 4px, box-shadow: transparentize(black, 0.9) 0 10px 5px 4px,
@ -113,3 +118,5 @@
} }
} }
.loader {
}