Fix image loading above the fold 🚀

Author: chicio

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Change Log
-All changes to Chicio coding will be documented in this file.
+All changes to Chicio Coding will be documented in this file.
+
+## [6.3.3](https://github.com/chicio/chicio.github.io/releases/tag/v6.3.3)
+Release date: 2023-09-24
+
+#### Fixed
+
+- Eager flag for images above the fold
 
 ## [6.3.2](https://github.com/chicio/chicio.github.io/releases/tag/v6.3.2)
 Release date: 2023-09-18

src/components/design-system/molecules/post-authors.tsx

@@ -87,6 +87,7 @@ export const PostAuthors: FC<PostAuthorsProps> = ({
           >
             <PostAuthorImage
               alt={blogAuthor.name}
+              loading={"eager"}
               image={blogAuthorImage}
               style={{
                 width: 30,

src/components/design-system/molecules/post-card.tsx

@@ -48,7 +48,7 @@ const PostCardContainer = styled.div<BigCardProps>`
   }
 `;
 
-const PostCardImageContainer = styled(GatsbyImage)`
+const PostCardImage = styled(GatsbyImage)`
   width: 100%;
   object-fit: cover;
   height: 200px;
@@ -117,9 +117,10 @@ export const PostCard: FC<PostCardProps> = ({
           label: tracking.label.body,
         }}
       >
-        <PostCardImageContainer
+        <PostCardImage
           alt={title}
           image={image}
+          loading={big ? "eager" : "lazy"}
           imgStyle={{
             borderRadius: "4px 4px 0 0",
           }}

src/components/design-system/organism/blog-header.tsx

@@ -126,6 +126,7 @@ export const BlogHeader: FC = () => (
     <ImageContainer>
       <StaticImage
         src={"../../../images/blog-logo.jpg"}
+        loading={"eager"}
         alt={"blog logo"}
         width={80}
         height={80}

src/components/design-system/organism/profile-presentation.tsx

@@ -64,6 +64,7 @@ export const ProfilePresentation: FC<ProfilePresentationProps> = ({
     <ProfileImageContainer>
       <StaticImage
         placeholder={"none"}
+        loading={"eager"}
         imgStyle={{
           width: "130px",
           height: "130px",

src/pages/index.tsx

@@ -13,21 +13,19 @@ import { FC } from "react";
 const BottomIndex = loadable(() => import(`../components/bottom-index`));
 
 const HomePage: FC<PageProps> = ({ location }) => {
-  const data = useStaticQuery<Queries.HomePageQuery>(
-    graphql`
-      query HomePage {
-        site {
-          siteMetadata {
-            author
-            featuredImage
-          }
+  const data = useStaticQuery<Queries.HomePageQuery>(graphql`
+    query HomePage {
+      site {
+        siteMetadata {
+          author
+          featuredImage
         }
       }
-    `
-  );
-  const siteMetada = data.site!.siteMetadata!;
-  const author = siteMetada.author!;
-  const featuredImage = siteMetada.featuredImage!;
+    }
+  `);
+  const siteMetadata = data.site!.siteMetadata!;
+  const author = siteMetadata.author!;
+  const featuredImage = siteMetadata.featuredImage!;
 
   return (
     <ShowcasePageTemplate