Topの一覧の画像にloading='lazy'

mehm8128 · Mar 23, 2024 · c05c8cd · c05c8cd
1 parent 009619f
commit c05c8cd
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/workspaces/app/src/features/book/components/BookListItem.tsx b/workspaces/app/src/features/book/components/BookListItem.tsx
@@ -49,7 +49,7 @@ export const BookListItem: React.FC<Props> = ({ book }) => {
         <Flex align="flex-start" gap={Space * 2.5} justify="flex-start">
           {imageUrl != null && (
             <_ImgWrapper>
-              <Image alt={book.name} height={64} objectFit="cover" src={imageUrl} width={64} />
+              <Image alt={book.name} height={64} loading="lazy" objectFit="cover" src={imageUrl} width={64} />
             </_ImgWrapper>
           )}
           <Box width="100%">

diff --git a/workspaces/app/src/features/feature/components/FeatureCard.tsx b/workspaces/app/src/features/feature/components/FeatureCard.tsx
@@ -56,7 +56,7 @@ const FeatureCard: React.FC<Props> = ({ book }) => {
     <_Wrapper to={`/books/${book.id}`}>
       {imageUrl != null && (
         <_ImgWrapper>
-          <Image alt={book.image.alt} height={96} objectFit="cover" src={imageUrl} width={96} />
+          <Image alt={book.image.alt} height={96} loading="lazy" objectFit="cover" src={imageUrl} width={96} />
         </_ImgWrapper>
       )}
 
@@ -71,7 +71,14 @@ const FeatureCard: React.FC<Props> = ({ book }) => {
         <Flex align="center" gap={Space * 1} justify="flex-end">
           {authorImageUrl != null && (
             <_AvatarWrapper>
-              <Image alt={book.author.name} height={32} objectFit="cover" src={authorImageUrl} width={32} />
+              <Image
+                alt={book.author.name}
+                height={32}
+                loading="lazy"
+                objectFit="cover"
+                src={authorImageUrl}
+                width={32}
+              />
             </_AvatarWrapper>
           )}
           <Text color={Color.MONO_100} typography={Typography.NORMAL14}>

diff --git a/workspaces/app/src/features/ranking/components/RankingCard.tsx b/workspaces/app/src/features/ranking/components/RankingCard.tsx
@@ -53,7 +53,7 @@ const RankingCard: React.FC<Props> = ({ book }) => {
         <Flex align="flex-start" gap={Space * 2.5} justify="flex-start">
           {imageUrl != null && (
             <_ImgWrapper>
-              <Image alt={book.name} height={96} objectFit="cover" src={imageUrl} width={96} />
+              <Image alt={book.name} height={96} loading="lazy" objectFit="cover" src={imageUrl} width={96} />
             </_ImgWrapper>
           )}
           <Box width="100%">
@@ -74,6 +74,7 @@ const RankingCard: React.FC<Props> = ({ book }) => {
                   <Image
                     alt={`${book.author.name}のアイコン`}
                     height={32}
+                    loading="lazy"
                     objectFit="cover"
                     src={authorImageUrl}
                     width={32}