From 02dd66a6af104ef33467dd7df4748ad857524902 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Fri, 7 Apr 2023 20:27:56 +0600
Subject: [PATCH] images: fixed lazy loading of SVG's

---
 src/components/node/NodeImageLazy/index.tsx   | 51 +++++++++++++++++++
 .../node/NodeImageSwiperBlock/index.tsx       | 13 ++---
 yarn.lock                                     |  2 +-
 3 files changed, 56 insertions(+), 10 deletions(-)
 create mode 100644 src/components/node/NodeImageLazy/index.tsx

diff --git a/src/components/node/NodeImageLazy/index.tsx b/src/components/node/NodeImageLazy/index.tsx
new file mode 100644
index 00000000..3ffeab3d
--- /dev/null
+++ b/src/components/node/NodeImageLazy/index.tsx
@@ -0,0 +1,51 @@
+import { FC } from 'react';
+
+import { imagePresets } from '~/constants/urls';
+import { IFile } from '~/types';
+import { normalizeBrightColor } from '~/utils/color';
+import { getURL } from '~/utils/dom';
+import { getFileSrcSet } from '~/utils/srcset';
+
+interface NodeImageLazyProps {
+  className?: string;
+  file: IFile;
+  onLoad?: () => void;
+  onClick?: () => void;
+}
+
+/** Separates SVG-s and raster images to be used in NodeImageSwiperBlock */
+const NodeImageLazy: FC<NodeImageLazyProps> = ({
+  file,
+  onLoad,
+  className,
+  onClick,
+}) => {
+  if (file.url.endsWith('svg')) {
+    return (
+      <img
+        data-src={getURL(file, imagePresets[1600])}
+        className={className}
+        onClick={onClick}
+        onLoad={onLoad}
+        color={normalizeBrightColor(file?.metadata?.dominant_color)}
+        alt=""
+      />
+    );
+  }
+
+  return (
+    <img
+      data-srcset={getFileSrcSet(file)}
+      width={file.metadata?.width}
+      height={file.metadata?.height}
+      onLoad={onLoad}
+      onClick={onClick}
+      className={className}
+      color={normalizeBrightColor(file?.metadata?.dominant_color)}
+      alt=""
+      sizes="(max-width: 560px) 100vw, 50vh"
+    />
+  );
+};
+
+export { NodeImageLazy };
diff --git a/src/components/node/NodeImageSwiperBlock/index.tsx b/src/components/node/NodeImageSwiperBlock/index.tsx
index 50a9c2db..c756e39f 100644
--- a/src/components/node/NodeImageSwiperBlock/index.tsx
+++ b/src/components/node/NodeImageSwiperBlock/index.tsx
@@ -18,9 +18,9 @@ import { imagePresets } from '~/constants/urls';
 import { useModal } from '~/hooks/modal/useModal';
 import { useImageModal } from '~/hooks/navigation/useImageModal';
 import { useNodeImages } from '~/hooks/node/useNodeImages';
-import { normalizeBrightColor } from '~/utils/color';
 import { getURL } from '~/utils/dom';
-import { getFileSrcSet } from '~/utils/srcset';
+
+import { NodeImageLazy } from '../NodeImageLazy';
 
 import styles from './styles.module.scss';
 
@@ -134,18 +134,13 @@ const NodeImageSwiperBlock: FC<IProps> = observer(({ node }) => {
               color={file.metadata?.dominant_color}
             >
               {({ loading, onLoad }) => (
-                <img
-                  data-srcset={getFileSrcSet(file)}
-                  width={file.metadata?.width}
-                  height={file.metadata?.height}
+                <NodeImageLazy
+                  file={file}
                   onLoad={onLoad}
                   onClick={() => onOpenPhotoSwipe(index)}
                   className={classNames(styles.image, 'swiper-lazy', {
                     [styles.loading]: loading,
                   })}
-                  color={normalizeBrightColor(file?.metadata?.dominant_color)}
-                  alt=""
-                  sizes="(max-width: 560px) 100vw, 50vh"
                 />
               )}
             </ImageLoadingWrapper>
diff --git a/yarn.lock b/yarn.lock
index e5cbd1e7..995443ab 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1999,7 +1999,7 @@ minimatch@^3.0.4:
   dependencies:
     brace-expansion "^1.1.7"
 
-minimist@^1.2.0, minimist@^1.2.5:
+minimist@^1.2.0:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.7.tgz#daa1c4d91f507390437c6a8bc01078e7000c4d18"
   integrity sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==