From ce1942daa8e865881d435c133471c9b9b619a491 Mon Sep 17 00:00:00 2001
From: Fabrizio Duroni <fabrizio.duroni@gmail.com>
Date: Sun, 24 Sep 2023 10:45:27 +0200
Subject: [PATCH] Fix image loading above the fold :rocket:
---
CHANGELOG.md | 9 ++++++-
.../design-system/molecules/post-authors.tsx | 1 +
.../design-system/molecules/post-card.tsx | 5 ++--
.../design-system/organism/blog-header.tsx | 1 +
.../organism/profile-presentation.tsx | 1 +
src/pages/index.tsx | 24 +++++++++----------
6 files changed, 25 insertions(+), 16 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index feba10d5c..8a3873756 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/src/components/design-system/molecules/post-authors.tsx b/src/components/design-system/molecules/post-authors.tsx
index ebbb09802..9be1f66b1 100644
--- a/src/components/design-system/molecules/post-authors.tsx
+++ b/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,
diff --git a/src/components/design-system/molecules/post-card.tsx b/src/components/design-system/molecules/post-card.tsx
index 97bce2af1..289a700d7 100644
--- a/src/components/design-system/molecules/post-card.tsx
+++ b/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",
}}
diff --git a/src/components/design-system/organism/blog-header.tsx b/src/components/design-system/organism/blog-header.tsx
index 0d873c365..060d7035c 100644
--- a/src/components/design-system/organism/blog-header.tsx
+++ b/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}
diff --git a/src/components/design-system/organism/profile-presentation.tsx b/src/components/design-system/organism/profile-presentation.tsx
index 444cadf16..e615c452d 100644
--- a/src/components/design-system/organism/profile-presentation.tsx
+++ b/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",
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 239ab707c..51ed5f00c 100644
--- a/src/pages/index.tsx
+++ b/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