added lazy loading to lab

src/components/lab/LabImage/index.tsx

@@ -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
+        <Image
-          file={file}
+          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)}
         />

src/components/lab/LabImage/styles.module.scss

@@ -51,6 +51,8 @@
   max-height: calc(100vh - 70px - 70px);
   max-width: 100%;
   transition: box-shadow 1s;
+  max-inline-size: 100%;
+  block-size: auto;
 
   @include tablet {
     padding-bottom: 0;

src/components/node/NodeImageSwiperBlock/index.tsx

@@ -2,28 +2,23 @@ import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 
 import classNames from 'classnames';
 import { observer } from 'mobx-react-lite';
-import Image from 'next/future/image';
 import SwiperCore, {
   Keyboard,
+  Lazy,
   Navigation,
   Pagination,
   SwiperOptions,
-  Lazy,
 } from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import SwiperClass from 'swiper/types/swiper-class';
 
 import { ImagePreloader } from '~/components/media/ImagePreloader';
 import { INodeComponentProps } from '~/constants/node';
-import { imagePresets } from '~/constants/urls';
 import { useModal } from '~/hooks/modal/useModal';
 import { useImageModal } from '~/hooks/navigation/useImageModal';
 import { useNodeImages } from '~/hooks/node/useNodeImages';
-import { IFile } from '~/types';
 import { normalizeBrightColor } from '~/utils/color';
-import { getURL } from '~/utils/dom';
+import { getFileSrcSet } from '~/utils/srcset';
-
-import { imageSrcSets, ImagePreset } from '../../../constants/urls';
 
 import styles from './styles.module.scss';
 
@@ -47,14 +42,6 @@ const lazy = {
   checkInView: true,
 };
 
-const generateSrcSet = (file: IFile) =>
-  Object.keys(imageSrcSets)
-    .map(
-      (preset) =>
-        `${getURL(file, preset as ImagePreset)} ${imageSrcSets[preset]}w`,
-    )
-    .join(', ');
-
 const NodeImageSwiperBlock: FC<IProps> = observer(({ node }) => {
   const [controlledSwiper, setControlledSwiper] = useState<
     SwiperClass | undefined
@@ -154,7 +141,7 @@ const NodeImageSwiperBlock: FC<IProps> = observer(({ node }) => {
           <SwiperSlide className={styles.slide} key={file.id}>
             <img
               style={{ backgroundColor: file.metadata?.dominant_color }}
-              data-srcset={generateSrcSet(file)}
+              data-srcset={getFileSrcSet(file)}
               width={file.metadata?.width}
               height={file.metadata?.height}
               onLoad={updateSwiper}

src/utils/srcset.ts

@@ -0,0 +1,12 @@
+import { IFile } from '~/types';
+import { getURL } from '~/utils/dom';
+
+import { imageSrcSets, ImagePreset } from '../constants/urls';
+
+export const getFileSrcSet = (file: IFile) =>
+  Object.keys(imageSrcSets)
+    .map(
+      (preset) =>
+        `${getURL(file, preset as ImagePreset)} ${imageSrcSets[preset]}w`,
+    )
+    .join(', ');