From a8074d94e8483495aecafdd3146308f82fb6b555 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Sat, 13 Jan 2024 14:08:36 +0800
Subject: [PATCH] chore: update image attrs

---
 web/src/components/MemoContent/Image.tsx    | 2 +-
 web/src/components/MemoResourceListView.tsx | 1 +
 web/src/components/PreviewImageDialog.tsx   | 2 ++
 web/src/components/ResourceIcon.tsx         | 3 ++-
 web/src/components/UserAvatar.tsx           | 2 ++
 5 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/web/src/components/MemoContent/Image.tsx b/web/src/components/MemoContent/Image.tsx
index 7957b58b..76ae0cdd 100644
--- a/web/src/components/MemoContent/Image.tsx
+++ b/web/src/components/MemoContent/Image.tsx
@@ -4,7 +4,7 @@ interface Props {
 }
 
 const Image: React.FC<Props> = ({ altText, url }: Props) => {
-  return <img alt={altText} src={url} />;
+  return <img src={url} alt={altText} decoding="async" loading="lazy" />;
 };
 
 export default Image;
diff --git a/web/src/components/MemoResourceListView.tsx b/web/src/components/MemoResourceListView.tsx
index 5c9d96b0..c2791b51 100644
--- a/web/src/components/MemoResourceListView.tsx
+++ b/web/src/components/MemoResourceListView.tsx
@@ -39,6 +39,7 @@ const MemoResourceListView = ({ resourceList = [] }: { resourceList: Resource[]
           src={resource.externalLink ? url : `${url}${thumbnail ? "?thumbnail=1" : ""}`}
           onClick={() => handleImageClick(url)}
           decoding="async"
+          loading="lazy"
         />
       );
     } else if (type === "video/*") {
diff --git a/web/src/components/PreviewImageDialog.tsx b/web/src/components/PreviewImageDialog.tsx
index 627253f9..85c39261 100644
--- a/web/src/components/PreviewImageDialog.tsx
+++ b/web/src/components/PreviewImageDialog.tsx
@@ -128,6 +128,8 @@ const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrls, initialIndex }:
           onTouchMove={handleTouchMove}
           onTouchEnd={handleTouchEnd}
           onWheel={handleImgContainerScroll}
+          decoding="async"
+          loading="lazy"
         />
       </div>
     </>
diff --git a/web/src/components/ResourceIcon.tsx b/web/src/components/ResourceIcon.tsx
index cf9a8bef..0ae3fffe 100644
--- a/web/src/components/ResourceIcon.tsx
+++ b/web/src/components/ResourceIcon.tsx
@@ -27,10 +27,11 @@ const ResourceIcon = (props: Props) => {
     return (
       <SquareDiv className={classNames(className, "flex items-center justify-center overflow-clip")}>
         <img
-          loading="lazy"
           className="min-w-full min-h-full object-cover border rounded dark:border-none"
           src={resource.externalLink ? resourceUrl : resourceUrl + "?thumbnail=1"}
           onClick={() => showPreviewImageDialog(resourceUrl)}
+          decoding="async"
+          loading="lazy"
         />
       </SquareDiv>
     );
diff --git a/web/src/components/UserAvatar.tsx b/web/src/components/UserAvatar.tsx
index c5353afd..640c363f 100644
--- a/web/src/components/UserAvatar.tsx
+++ b/web/src/components/UserAvatar.tsx
@@ -12,6 +12,8 @@ const UserAvatar = (props: Props) => {
       <img
         className="w-full h-auto rounded-full shadow min-w-full min-h-full object-cover dark:opacity-80"
         src={avatarUrl || "/logo.png"}
+        decoding="async"
+        loading="lazy"
         alt=""
       />
     </div>