perf: optimize image loading for first blog post card

Update the Card component to accept loading and fetchpriority props. Apply eager loading and high fetch priority to the first post in both Blog-grid and Blog-list sections to improve rendering performance.

Signed-off-by: Lorenzo Croce <lorenzo.croce@arenastudios.it>

Author: Fireentity

src/components/Card/index.js

@@ -6,7 +6,7 @@ import Image from "../image";
 import { CardWrapper } from "./Card.style";
 import { useStyledDarkMode } from "../../theme/app/useStyledDarkMode";
 
-const Card = ({ frontmatter, fields }) => {
+const Card = ({ frontmatter, fields, loading = "lazy", fetchpriority = "auto" }) => {
 
   const { isDark } = useStyledDarkMode();
 
@@ -18,6 +18,8 @@ const Card = ({ frontmatter, fields }) => {
             {...((isDark && frontmatter.darkthumbnail && frontmatter.darkthumbnail.publicURL !== frontmatter.thumbnail.publicURL)
               ? frontmatter.darkthumbnail : frontmatter.thumbnail)}
             imgStyle={{ objectFit: "contain" }}
+            loading={loading}
+            fetchpriority={fetchpriority}
             alt={frontmatter.title}
           />
         </div>

src/sections/Blog/Blog-grid/index.js

@@ -61,9 +61,9 @@ const BlogGrid = ({
                     </Col>
                   )}
 
-                  {searchedPosts.length > 0 && searchedPosts.map(({ id, frontmatter, fields }) => (
+                  {searchedPosts.length > 0 && searchedPosts.map(({ id, frontmatter, fields }, index) => (
                     <Col key={id} $xs={12} $sm={6}>
-                      <Card frontmatter={frontmatter} fields={fields} />
+                      <Card frontmatter={frontmatter} fields={fields} loading={index === 0 ? "eager" : "lazy"} fetchpriority={index === 0 ? "high" : "auto"} />
                     </Col>
                   ))}
                   <Col>

src/sections/Blog/Blog-list/index.js

@@ -74,9 +74,9 @@ const BlogList = ({
                 }}
                 className="blog-lists">
                   {searchedPosts.length > 0 &&
-                    searchedPosts?.map(({ id, frontmatter, fields }) => (
+                    searchedPosts?.map(({ id, frontmatter, fields }, index) => (
                       <Col $xs={12} key={id}>
-                        <Card frontmatter={frontmatter} fields={fields} />
+                        <Card frontmatter={frontmatter} fields={fields} loading={index === 0 ? "eager" : "lazy"} fetchpriority={index === 0 ? "high" : "auto"} />
                       </Col>
                     ))}
                   <Col>