disabled short swipes on node images block

src/components/node/NodeImageSwiperBlock/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useEffect, useState } from 'react';
+import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
 
 import { observer } from 'mobx-react-lite';
 import SwiperCore, { Keyboard, Navigation, Pagination, SwiperOptions } from 'swiper';
@@ -24,6 +24,8 @@ const breakpoints: SwiperOptions['breakpoints'] = {
   },
 };
 
+const pagination = { type: 'fraction' as const };
+
 const NodeImageSwiperBlock: FC<IProps> = observer(({ node }) => {
   const [controlledSwiper, setControlledSwiper] = useState<SwiperClass | undefined>(undefined);
   const showPhotoSwiper = useImageModal();
@@ -31,6 +33,14 @@ const NodeImageSwiperBlock: FC<IProps> = observer(({ node }) => {
 
   const images = useNodeImages(node);
 
+  const keyboard = useMemo(
+    () => ({
+      enabled: !isModalActive,
+      onlyInViewport: true,
+    }),
+    [isModalActive]
+  );
+
   const updateSwiper = useCallback(() => {
     if (!controlledSwiper) return;
 
@@ -90,7 +100,7 @@ const NodeImageSwiperBlock: FC<IProps> = observer(({ node }) => {
         slidesPerView="auto"
         onSwiper={setControlledSwiper}
         breakpoints={breakpoints}
-        pagination={{ type: 'fraction' }}
+        pagination={pagination}
         centeredSlides
         observeSlideChildren
         observeParents
@@ -98,14 +108,12 @@ const NodeImageSwiperBlock: FC<IProps> = observer(({ node }) => {
         resizeObserver
         watchOverflow
         updateOnImagesReady
-        keyboard={{
+        keyboard={keyboard}
-          enabled: !isModalActive,
-          onlyInViewport: true,
-        }}
         grabCursor
         autoHeight
         zoom
         navigation
+        shortSwipes={false}
       >
         {images.map((file, i) => (
           <SwiperSlide className={styles.slide} key={file.id}>