From 59d1944fb70c79e43869b46c7a639973a9d42c76 Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Sat, 20 Jan 2024 13:23:05 +0800
Subject: [PATCH] feat: lazyload image

Signed-off-by: Innei <i@innei.in>
---
 src/app/(app)/(home)/page.tsx                 | 24 +++++++-----
 .../ui/markdown/renderers/image.tsx           | 39 +++++++++++--------
 2 files changed, 38 insertions(+), 25 deletions(-)

diff --git a/src/app/(app)/(home)/page.tsx b/src/app/(app)/(home)/page.tsx
index 9d1d8820af..da10390c56 100644
--- a/src/app/(app)/(home)/page.tsx
+++ b/src/app/(app)/(home)/page.tsx
@@ -4,6 +4,7 @@ import { useQuery } from '@tanstack/react-query'
 import React, { createElement, forwardRef, useCallback, useRef } from 'react'
 import clsx from 'clsx'
 import { m, useInView } from 'framer-motion'
+import Image from 'next/image'
 import Link from 'next/link'
 import type { LinkModel } from '@mx-space/api-client'
 import type { PropsWithChildren } from 'react'
@@ -182,15 +183,20 @@ const Welcome = () => {
           </ul>
         </>
 
-        <img
-          src={avatar}
-          alt="Site Owner Avatar"
-          className={clsxm(
-            'aspect-square rounded-full border border-slate-200 dark:border-neutral-800',
-            'lg:h-[300px] lg:w-[300px]',
-            'h-[200px] w-[200px]',
-          )}
-        />
+        <div
+          className={clsx('lg:h-[300px] lg:w-[300px]', 'h-[200px] w-[200px]')}
+        >
+          <Image
+            height={300}
+            width={300}
+            src={avatar!}
+            alt="Site Owner Avatar"
+            className={clsxm(
+              'aspect-square rounded-full border border-slate-200 dark:border-neutral-800',
+              'w-full',
+            )}
+          />
+        </div>
 
         <m.div
           initial={{ opacity: 0.0001, y: 50 }}
diff --git a/src/components/ui/markdown/renderers/image.tsx b/src/components/ui/markdown/renderers/image.tsx
index 4cce2b4aa8..12bb31bb13 100644
--- a/src/components/ui/markdown/renderers/image.tsx
+++ b/src/components/ui/markdown/renderers/image.tsx
@@ -3,8 +3,10 @@
 import React, { memo, useRef } from 'react'
 import clsx from 'clsx'
 import mediumZoom from 'medium-zoom'
+import Image from 'next/image'
 import type { FC } from 'react'
 
+import { LazyLoad } from '~/components/common/Lazyload'
 import { addImageUrlResizeQuery } from '~/lib/image'
 import { isVideoExt } from '~/lib/mine-type'
 import { useMarkdownImageRecord } from '~/providers/article/MarkdownImageRecordProvider'
@@ -80,6 +82,8 @@ const GridZoomImage: FC<{ src: string }> = memo(({ src }) => {
   const imageEl = useRef<HTMLImageElement>(null)
   const wGreaterThanH = width && height ? width > height : true
 
+  const ImageComponent = height && width ? Image : 'img'
+
   return (
     <div
       className="relative flex h-full w-full overflow-hidden rounded-md bg-cover bg-center center"
@@ -87,22 +91,25 @@ const GridZoomImage: FC<{ src: string }> = memo(({ src }) => {
         backgroundColor: accent,
       }}
     >
-      <img
-        alt=""
-        height={height}
-        width={width}
-        src={cropUrl}
-        ref={imageEl}
-        className={clsx(
-          '!mx-0 !my-0 max-w-max object-cover',
-          wGreaterThanH ? 'h-full' : 'w-full',
-        )}
-        data-zoom-src={src}
-        onClick={() => {
-          if (!imageEl.current) return
-          mediumZoom(imageEl.current).open()
-        }}
-      />
+      <LazyLoad offset={30}>
+        <ImageComponent
+          loading="lazy"
+          alt=""
+          height={height}
+          width={width}
+          src={cropUrl}
+          ref={imageEl}
+          className={clsx(
+            '!mx-0 !my-0 max-w-max object-cover',
+            wGreaterThanH ? 'h-full' : 'w-full',
+          )}
+          data-zoom-src={src}
+          onClick={() => {
+            if (!imageEl.current) return
+            mediumZoom(imageEl.current).open()
+          }}
+        />
+      </LazyLoad>
     </div>
   )
 })