added lazy loading to NodeImageSwiperBlock

src/components/node/NodeAudioImageBlock/index.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 
 import { INodeComponentProps } from '~/constants/node';
-import { ImagePresets } from '~/constants/urls';
+import { imagePresets } from '~/constants/urls';
 import { useNodeImages } from '~/hooks/node/useNodeImages';
 import { getURL } from '~/utils/dom';
 import { path } from '~/utils/ramda';
@@ -19,7 +19,12 @@ const NodeAudioImageBlock: FC<IProps> = ({ node }) => {
     <div className={styles.wrap}>
       <div
         className={styles.slide}
-        style={{ backgroundImage: `url("${getURL(path([0], images), ImagePresets.small_hero)}")` }}
+        style={{
+          backgroundImage: `url("${getURL(
+            path([0], images),
+            imagePresets.small_hero,
+          )}")`,
+        }}
       />
     </div>
   );

src/components/node/NodeImageSwiperBlock/index.tsx

@@ -1,5 +1,6 @@
 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, {
@@ -7,22 +8,26 @@ import SwiperCore, {
   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 { 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 { imageSrcSets, ImagePreset } from '../../../constants/urls';
+
 import styles from './styles.module.scss';
 
-SwiperCore.use([Navigation, Pagination, Keyboard]);
+SwiperCore.use([Navigation, Pagination, Keyboard, Lazy]);
 
 interface IProps extends INodeComponentProps {}
 
@@ -34,6 +39,22 @@ const breakpoints: SwiperOptions['breakpoints'] = {
 
 const pagination = { type: 'fraction' as const };
 
+const lazy = {
+  enabled: true,
+  loadPrevNextAmount: 1,
+  loadOnTransitionStart: true,
+  loadPrevNext: true,
+  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
@@ -126,20 +147,22 @@ const NodeImageSwiperBlock: FC<IProps> = observer(({ node }) => {
         autoHeight
         zoom
         navigation
+        watchSlidesProgress
+        lazy={lazy}
       >
         {images.map((file, i) => (
           <SwiperSlide className={styles.slide} key={file.id}>
-            <Image
+            <img
               style={{ backgroundColor: file.metadata?.dominant_color }}
-              src={getURL(file, ImagePresets['1600'])}
+              data-srcset={generateSrcSet(file)}
               width={file.metadata?.width}
               height={file.metadata?.height}
               onLoad={updateSwiper}
               onClick={() => onOpenPhotoSwipe(i)}
-              className={styles.image}
+              className={classNames(styles.image, 'swiper-lazy')}
               color={normalizeBrightColor(file?.metadata?.dominant_color)}
               alt=""
-              priority={i < 2}
+              sizes="(max-width: 560px) 100vw, 50vh"
             />
           </SwiperSlide>
         ))}

src/components/node/NodeRelatedItem/index.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { ImageWithSSRLoad } from '~/components/common/ImageWithSSRLoad';
 import { Square } from '~/components/common/Square';
 import { Icon } from '~/components/input/Icon';
-import { ImagePresets } from '~/constants/urls';
+import { imagePresets } from '~/constants/urls';
 import { useColorGradientFromString } from '~/hooks/color/useColorGradientFromString';
 import { useGotoNode } from '~/hooks/node/useGotoNode';
 import { INode } from '~/types';
@@ -42,7 +42,7 @@ const NodeRelatedItem: FC<IProps> = memo(({ item }) => {
   const thumb = useMemo(
     () =>
       item.thumbnail
-        ? getURL({ url: item.thumbnail }, ImagePresets.avatar)
+        ? getURL({ url: item.thumbnail }, imagePresets.avatar)
         : '',
     [item],
   );
@@ -68,7 +68,7 @@ const NodeRelatedItem: FC<IProps> = memo(({ item }) => {
   }, [width]);
 
   const image = useMemo(
-    () => getURL({ url: item.thumbnail }, ImagePresets.avatar),
+    () => getURL({ url: item.thumbnail }, imagePresets.avatar),
     [item.thumbnail],
   );