From acacc42ccf126f16858b818257696d6a641c2e3c Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Tue, 31 Oct 2023 11:20:32 +0600
Subject: [PATCH] fixed image load on PhotoSwipe

---
 src/components/common/ImageLoadingWrapper/index.tsx |  9 ++-------
 src/components/node/NodeImageLazy/index.tsx         |  3 ++-
 src/components/node/NodeImageSwiperBlock/index.tsx  | 10 +++-------
 3 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/src/components/common/ImageLoadingWrapper/index.tsx b/src/components/common/ImageLoadingWrapper/index.tsx
index 186f559c..a8fe5749 100644
--- a/src/components/common/ImageLoadingWrapper/index.tsx
+++ b/src/components/common/ImageLoadingWrapper/index.tsx
@@ -1,9 +1,4 @@
-import React, {
-  CSSProperties,
-  FC,
-  useMemo,
-  useReducer,
-} from 'react';
+import React, { CSSProperties, FC, useMemo, useReducer } from 'react';
 
 import classNames from 'classnames';
 
@@ -24,7 +19,7 @@ const ImageLoadingWrapper: FC<ImageLoadingWrapperProps> = ({
   color,
   ...props
 }) => {
-  const [loading, onLoad] = useReducer((v) => false, true);
+  const [loading, onLoad] = useReducer(() => false, true);
 
   const style = useMemo<CSSProperties>(
     () => ({
diff --git a/src/components/node/NodeImageLazy/index.tsx b/src/components/node/NodeImageLazy/index.tsx
index 3ffeab3d..4d785916 100644
--- a/src/components/node/NodeImageLazy/index.tsx
+++ b/src/components/node/NodeImageLazy/index.tsx
@@ -23,7 +23,7 @@ const NodeImageLazy: FC<NodeImageLazyProps> = ({
   if (file.url.endsWith('svg')) {
     return (
       <img
-        data-src={getURL(file, imagePresets[1600])}
+        data-src={getURL(file)}
         className={className}
         onClick={onClick}
         onLoad={onLoad}
@@ -36,6 +36,7 @@ const NodeImageLazy: FC<NodeImageLazyProps> = ({
   return (
     <img
       data-srcset={getFileSrcSet(file)}
+      data-src={getURL(file, imagePresets[1600])}
       width={file.metadata?.width}
       height={file.metadata?.height}
       onLoad={onLoad}
diff --git a/src/components/node/NodeImageSwiperBlock/index.tsx b/src/components/node/NodeImageSwiperBlock/index.tsx
index e8a82db0..3a96ad2a 100644
--- a/src/components/node/NodeImageSwiperBlock/index.tsx
+++ b/src/components/node/NodeImageSwiperBlock/index.tsx
@@ -45,9 +45,7 @@ const lazy = {
 };
 
 const NodeImageSwiperBlock: FC<IProps> = observer(({ node }) => {
-  const [controlledSwiper, setControlledSwiper] = useState<
-    SwiperClass | undefined
-  >(undefined);
+  const [controlledSwiper, setControlledSwiper] = useState<SwiperClass>();
   const showPhotoSwiper = useImageModal();
   const { isOpened: isModalActive } = useModal();
 
@@ -89,8 +87,7 @@ const NodeImageSwiperBlock: FC<IProps> = observer(({ node }) => {
   useEffect(() => {
     controlledSwiper?.slideTo(0, 0);
     return () => controlledSwiper?.slideTo(0, 0);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [images, node?.id]);
+  }, [controlledSwiper, images, node.id]);
 
   useEffect(() => {
     if (isModalActive) {
@@ -98,8 +95,7 @@ const NodeImageSwiperBlock: FC<IProps> = observer(({ node }) => {
     } else {
       controlledSwiper?.keyboard.enable();
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isModalActive]);
+  }, [controlledSwiper?.keyboard, isModalActive]);
 
   if (!images?.length) {
     return null;