add eager to first image

src/pages/blog.astro

@@ -26,7 +26,7 @@ console.log(posts[0].frontmatter.image);
     <main class="mt-16">
       <ul class="grid gap-16 max-w-4xl mx-auto">
         {
-          posts.map((post) => (
+          posts.map((post, index) => (
             <li>
               <a href={post.url}>
                 <div class="grid md:grid-cols-2 gap-5 md:gap-10 items-center">
@@ -36,6 +36,7 @@ console.log(posts[0].frontmatter.image);
                     sizes="(max-width: 800px) 100vw, 800px"
                     aspectRatio="16:9"
                     alt="Thumbnail"
+                    loading={index === 0 ? "eager" : "lazy"}
                     class="w-full rounded-md aspect-video"
                   />
                   <div>