disable lazyload for first image

sapphi-red · Dec 31, 2021 · 448fb94 · 448fb94
1 parent 0aa3a11
commit 448fb94
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 11 deletions.
diff --git a/client/src/components/foundation/CoveredImage/CoveredImage.jsx b/client/src/components/foundation/CoveredImage/CoveredImage.jsx
@@ -10,15 +10,15 @@ import React from 'react';
  * アスペクト比を維持したまま、要素のコンテンツボックス全体を埋めるように画像を拡大縮小します
  * @type {React.VFC<Props>}
  */
-const CoveredImage = ({ alt, src, children }) => {
+const CoveredImage = ({ alt, src, children, eager }) => {
   return (
     <picture className="w-full h-full overflow-hidden">
       {children}
       <img
         alt={alt}
         className="w-full h-full max-w-none object-cover"
         src={src}
-        loading="lazy"
+        loading={eager ? null : 'lazy'}
       />
     </picture>
   );

diff --git a/client/src/components/post/ImageArea/ImageArea.jsx b/client/src/components/post/ImageArea/ImageArea.jsx
@@ -11,7 +11,7 @@ import { CoveredImage } from '../../foundation/CoveredImage';
  */
 
 /** @type {React.VFC<Props>} */
-const ImageArea = ({ images }) => {
+const ImageArea = ({ images, eager }) => {
   return (
     <AspectRatioBox aspectHeight={9} aspectWidth={16}>
       <div className="grid gap-1 grid-cols-2 grid-rows-2 w-full h-full border border-gray-300 rounded-lg overflow-hidden">
@@ -30,6 +30,7 @@ const ImageArea = ({ images }) => {
               <CoveredImage
                 alt={image.alt}
                 src={getImagePath(image.id, images.length >= 2)}
+                eager={eager && idx === 0}
               >
                 {
                   images.length === 1

diff --git a/client/src/components/post/PostItem/PostItem.jsx b/client/src/components/post/PostItem/PostItem.jsx
@@ -63,7 +63,7 @@ const PostItem = ({ post }) => {
           <p className="text-gray-800 text-xl leading-relaxed">{post?.text ?? '　'}</p>
           {post?.images?.length > 0 ? (
             <div className="relative mt-2 w-full">
-              <ImageArea images={post.images} />
+              <ImageArea images={post.images} eager />
             </div>
           ) : null}
           {post?.movie ? (

diff --git a/client/src/components/timeline/Timeline/Timeline.jsx b/client/src/components/timeline/Timeline/Timeline.jsx
@@ -8,11 +8,11 @@ import { TimelineItem } from '../TimelineItem';
  */
 
 /** @type {React.VFC<Props>} */
-const Timeline = ({ timeline }) => {
+const Timeline = ({ timeline, eager }) => {
   return (
     <section>
-      {timeline.map((post) => {
-        return <TimelineItem key={post.id} post={post} />;
+      {timeline.map((post, idx) => {
+        return <TimelineItem key={post.id} post={post} eager={eager && idx === 0} />;
       })}
     </section>
   );

diff --git a/client/src/components/timeline/TimelineItem/TimelineItem.jsx b/client/src/components/timeline/TimelineItem/TimelineItem.jsx
@@ -32,7 +32,7 @@ const isClickedAnchorOrButton = (target, currentTarget) => {
  */
 
 /** @type {React.VFC<Props>} */
-const TimelineItem = ({ post }) => {
+const TimelineItem = ({ post, eager }) => {
   const navigate = useNavigate();
 
   /**
@@ -78,7 +78,7 @@ const TimelineItem = ({ post }) => {
           <p className="text-gray-800 leading-relaxed">{post.text}</p>
           {post.images?.length > 0 ? (
             <div className="relative mt-2 w-full">
-              <ImageArea images={post.images} />
+              <ImageArea images={post.images} eager={eager} />
             </div>
           ) : null}
           {post.movie ? (

diff --git a/client/src/components/timeline/TimelinePage/TimelinePage.jsx b/client/src/components/timeline/TimelinePage/TimelinePage.jsx
@@ -9,7 +9,7 @@ import { Timeline } from '../Timeline';
 
 /** @type {React.VFC<Props>} */
 const TimelinePage = ({ timeline }) => {
-  return <Timeline timeline={timeline} />;
+  return <Timeline timeline={timeline} eager />;
 };
 
 export { TimelinePage };
diff --git a/client/src/components/user_profile/UserProfilePage/UserProfilePage.jsx b/client/src/components/user_profile/UserProfilePage/UserProfilePage.jsx
@@ -15,7 +15,7 @@ const UserProfilePage = ({ timeline, user }) => {
     <>
       <UserProfileHeader user={user} />
       <div className="mt-6 border-t border-gray-300">
-        <Timeline timeline={timeline} />
+        <Timeline timeline={timeline} eager />
       </div>
     </>
   );