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 preload for lab images

Browse source
This commit is contained in:
Fedor Katurov 2021-10-12 15:26:49 +07:00
parent bcd1094575
commit 9dbc5739b7
2 changed files with 8 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/lab/LabImage/index.tsx
View file

@ -16,6 +16,8 @@ import { PRESETS } from '~/constants/urls';
import SwiperClass from 'swiper/types/swiper-class';
import { useGotoNode } from '~/utils/hooks/node/useGotoNode';
import { Placeholder } from '~/components/placeholders/Placeholder';
import { normalizeBrightColor } from '~/utils/color';
import { ImagePreloader } from '~/components/media/ImagePreloader';
SwiperCore.use([Navigation, Pagination, A11y]);
@ -79,12 +81,12 @@ const LabImage: FC<IProps> = ({ node, isLoading }) => {
>
{images.map(file => (
<SwiperSlide className={styles.slide} key={file.id}>
<img
className={styles.image}
src={getURL(file, PRESETS['1600'])}
alt={node.title}
<ImagePreloader
file={file}
onLoad={updateSwiper}
onClick={onClick}
className={styles.image}
color={normalizeBrightColor(file?.metadata?.dominant_color)}
/>
</SwiperSlide>
))}

3
src/components/lab/LabImage/styles.module.scss
View file

@ -1,11 +1,12 @@
@import "~/styles/variables.scss";
.wrapper {
border-radius: $radius;
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
border-radius: $radius $radius 0 0;
overflow: hidden;
:global(.swiper-container) {
width: 100%;