bump swiper to latest version

src/components/media/PinchZoom/index.tsx

@@ -48,6 +48,7 @@ const PinchZoom: FC<Props> = ({ children }) => {
       if (event.touches.length !== 2 || !ref) {
         return;
       }
+
       event.preventDefault(); // Prevent page scroll
 
       // Safari provides event.scale as two fingers move on the screen

src/components/node/NodeImageSwiperBlock/index.tsx

@@ -2,12 +2,11 @@ import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 
 import classNames from 'classnames';
 import { observer } from 'mobx-react-lite';
-import SwiperCore, { Keyboard, Lazy, Navigation, Pagination } from 'swiper';
+import { Keyboard, Navigation, Pagination, Zoom } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import SwiperClass from 'swiper/types/swiper-class';
 
 import { ImageLoadingWrapper } from '~/components/common/ImageLoadingWrapper/index';
-import { PinchZoom } from '~/components/media/PinchZoom';
 import { NodeComponentProps } from '~/constants/node';
 import { imagePresets } from '~/constants/urls';
 import { useWindowSize } from '~/hooks/dom/useWindowSize';
@@ -23,8 +22,6 @@ import { getNodeSwiperImageSizes } from './helpers';
 import { NODE_SWIPER_OPTIONS } from './options';
 import styles from './styles.module.scss';
 
-SwiperCore.use([Navigation, Pagination, Keyboard, Lazy]);
-
 interface IProps extends NodeComponentProps {}
 
 const NodeImageSwiperBlock: FC<IProps> = observer(({ node }) => {
@@ -65,9 +62,9 @@ const NodeImageSwiperBlock: FC<IProps> = observer(({ node }) => {
 
   useEffect(() => {
     if (isModalActive) {
-      controlledSwiper?.keyboard.disable();
+      controlledSwiper?.keyboard?.disable();
     } else {
-      controlledSwiper?.keyboard.enable();
+      controlledSwiper?.keyboard?.enable();
     }
   }, [controlledSwiper?.keyboard, isModalActive]);
 
@@ -78,6 +75,7 @@ const NodeImageSwiperBlock: FC<IProps> = observer(({ node }) => {
   return (
     <div className={styles.wrapper}>
       <Swiper
+        modules={[Navigation, Pagination, Keyboard, Zoom]}
         enabled={images.length > 1}
         initialSlide={0}
         slidesPerView="auto"
@@ -90,48 +88,36 @@ const NodeImageSwiperBlock: FC<IProps> = observer(({ node }) => {
         observer
         resizeObserver
         watchOverflow
-        updateOnImagesReady
         keyboard={keyboard}
         grabCursor
         autoHeight
         zoom
         navigation
         watchSlidesProgress
-        lazy={NODE_SWIPER_OPTIONS.lazy}
+        lazyPreloadPrevNext={1}
       >
         {images.map((file, index) => (
           <SwiperSlide className={styles.slide} key={file.id}>
-            <PinchZoom>
-              {({ setRef }) => (
-                <ImageLoadingWrapper
-                  preview={getURL(file, imagePresets['300'])}
-                  color={file.metadata?.dominant_color}
-                  ref={setRef}
-                >
-                  {({ loading, onLoad }) => (
-                    <NodeImageLazy
-                      src={getURL(file)}
-                      width={file.metadata?.width}
-                      height={file.metadata?.height}
-                      color={normalizeBrightColor(
-                        file?.metadata?.dominant_color,
-                      )}
-                      onLoad={onLoad}
-                      onClick={() => onOpenPhotoSwipe(index)}
-                      className={classNames(styles.image, 'swiper-lazy', {
-                        [styles.loading]: loading,
-                      })}
-                      sizes={getNodeSwiperImageSizes(
-                        file,
-                        innerWidth,
-                        innerHeight,
-                      )}
-                      quality={90}
-                    />
-                  )}
-                </ImageLoadingWrapper>
+            <ImageLoadingWrapper
+              preview={getURL(file, imagePresets['300'])}
+              color={file.metadata?.dominant_color}
+            >
+              {({ loading, onLoad }) => (
+                <NodeImageLazy
+                  src={getURL(file)}
+                  width={file.metadata?.width}
+                  height={file.metadata?.height}
+                  color={normalizeBrightColor(file?.metadata?.dominant_color)}
+                  onLoad={onLoad}
+                  onClick={() => onOpenPhotoSwipe(index)}
+                  className={classNames(styles.image, 'swiper-lazy', {
+                    [styles.loading]: loading,
+                  })}
+                  sizes={getNodeSwiperImageSizes(file, innerWidth, innerHeight)}
+                  quality={90}
+                />
               )}
-            </PinchZoom>
+            </ImageLoadingWrapper>
           </SwiperSlide>
         ))}
       </Swiper>

src/components/node/NodeImageSwiperBlock/options.ts

@@ -14,4 +14,4 @@ export const NODE_SWIPER_OPTIONS: SwiperOptions = {
     loadPrevNext: true,
     checkInView: true,
   },
-};
+} as const;

src/styles/_global.scss

@@ -7,7 +7,6 @@
 
 @import 'swiper/css';
 @import 'swiper/css/effect-fade';
-@import 'swiper/css/lazy';
 @import 'swiper/css/pagination';
 @import 'swiper/css/scrollbar';
 @import 'swiper/css/zoom';