added lazy loading to flow images

next.config.js

@@ -22,5 +22,14 @@ module.exports = withBundleAnalyzer(
 
     /** don't try to optimize fonts */
     optimizeFonts: false,
+    images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '*.vault48.org',
+        pathname: '/**',
+      },
+    ],
+  },
   })
 );

src/components/flow/FlowCell/index.tsx

@@ -119,7 +119,6 @@ const FlowCell: FC<Props> = ({
         {image && (
           <FlowCellImage
             src={image}
-            height={400}
             className={styles.thumb}
             style={{ backgroundColor: color }}
           />

src/components/flow/FlowCellImage/index.tsx

@@ -1,6 +1,7 @@
 import React, { FC } from 'react';
 
 import classNames from 'classnames';
+import Image from 'next/image';
 
 import { IMGProps } from '~/utils/types';
 
@@ -10,9 +11,15 @@ interface Props extends IMGProps {
   height?: number;
 }
 
-const FlowCellImage: FC<Props> = ({ className, children, ...rest }) => (
+const FlowCellImage: FC<Props> = ({
+  className,
+  children,
+  src,
+  alt,
+  ...rest
+}) => (
   <div className={classNames(styles.wrapper, className)}>
-    <img {...rest} src={rest.src} alt="" />
+    <Image {...rest} src={src!} alt={alt} placeholder="empty" layout="fill" />
     {children}
   </div>
 );

src/components/flow/FlowCellImage/styles.module.scss

@@ -2,14 +2,4 @@
   width: 100%;
   height: 100%;
   position: relative;
-
-  img {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 100%;
-    height: 100%;
-    transform: translate(-50%, -50%);
-    object-fit: cover;
-  }
 }