images: fixed lazy loading of SVG's

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 };

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
+                <NodeImageLazy
-                  data-srcset={getFileSrcSet(file)}
+                  file={file}
-                  width={file.metadata?.width}
-                  height={file.metadata?.height}
                   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>

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==