muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-28 14:16:41 +07:00
Code Packages Activity Actions

added lazy loading to lab

Browse source
This commit is contained in:
Fedor Katurov 2022-12-07 13:17:47 +06:00
parent 10bb6f01b5
commit 182ff11d2b
4 changed files with 26 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,13 +1,16 @@
import React, { FC } from 'react';
import Image from 'next/future/image';
import SwiperCore, { A11y, Navigation, Pagination } from 'swiper';
import { ImagePreloader } from '~/components/media/ImagePreloader';
import { Placeholder } from '~/components/placeholders/Placeholder';
import { INodeComponentProps } from '~/constants/node';
import { imagePresets } from '~/constants/urls';
import { useGotoNode } from '~/hooks/node/useGotoNode';
import { useNodeImages } from '~/hooks/node/useNodeImages';
import { normalizeBrightColor } from '~/utils/color';
import { getURL } from '~/utils/dom';
import styles from './styles.module.scss';
@ -19,7 +22,7 @@ const LabImage: FC<IProps> = ({ node, isLoading }) => {
const images = useNodeImages(node);
const onClick = useGotoNode(node.id);
if (!images?.length && !isLoading) {
if (!images?.length) {
return null;
}
@ -28,9 +31,12 @@ const LabImage: FC<IProps> = ({ node, isLoading }) => {
return (
<Placeholder active={isLoading} width="100%" height={400}>
<div className={styles.wrapper}>
<ImagePreloader
file={file}
<Image
src={getURL(file, imagePresets[600])}
width={file.metadata?.width}
height={file.metadata?.height}
onClick={onClick}
alt=""
className={styles.image}
color={normalizeBrightColor(file?.metadata?.dominant_color)}
/>