From d0bd5db04463ac0129bc7c400a15dd867ffca80f Mon Sep 17 00:00:00 2001
From: Eugene Fox <eugene@xfox111.net>
Date: Tue, 22 Jul 2025 14:47:49 +0000
Subject: [PATCH] chore: replace priority attribute with loading="eager" for
 images

---
 app/_data/FrontSection.tsx             |  4 ++--
 app/_data/TitleLogo.tsx                |  2 +-
 app/_page_sections/ProjectsSection.tsx | 10 +++++++---
 app/_page_sections/SkillsSection.tsx   |  2 +-
 app/loading.tsx                        |  4 ++--
 app/not-found.tsx                      |  2 +-
 app/resume/page.tsx                    |  2 +-
 7 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/app/_data/FrontSection.tsx b/app/_data/FrontSection.tsx
index db924a0..42c1ef5 100644
--- a/app/_data/FrontSection.tsx
+++ b/app/_data/FrontSection.tsx
@@ -23,8 +23,8 @@ const FrontSection: React.FC = () => (
 		</div>
 
 		<div className={ cls.illustrations }>
-			<Image className={ cls.main } src={ profilePicture.src } alt={ profilePicture.alt } priority />
-			<Image className={ cls.secondary } src={ homeDecor.src } alt={ homeDecor.alt } />
+			<Image className={ cls.main } src={ profilePicture.src } alt={ profilePicture.alt } loading="eager" />
+			<Image className={ cls.secondary } src={ homeDecor.src } alt={ homeDecor.alt } loading="eager" />
 		</div>
 	</section>
 );
diff --git a/app/_data/TitleLogo.tsx b/app/_data/TitleLogo.tsx
index 1cb289e..247f9ae 100644
--- a/app/_data/TitleLogo.tsx
+++ b/app/_data/TitleLogo.tsx
@@ -9,7 +9,7 @@ const TitleLogo: React.FC = () => (
 		<Image src={ logo }
 			alt="A fox jumping down, and a diagonal stripe in the background, forming letters X and F"
 			aria-hidden
-			priority />
+			loading="eager" />
 		<p>
 			<span>xfox111</span>
 			<sub>.net</sub>
diff --git a/app/_page_sections/ProjectsSection.tsx b/app/_page_sections/ProjectsSection.tsx
index 3bd5e41..8d53a7b 100644
--- a/app/_page_sections/ProjectsSection.tsx
+++ b/app/_page_sections/ProjectsSection.tsx
@@ -51,10 +51,14 @@ const ProjectsSection: React.FC = () =>
 			<div className={ cls.descriptions } aria-live="polite" aria-atomic>
 				{ projects.map((project, index) =>
 					<div key={ index } className={ cls.projectItem } hidden={ selection !== index }>
-						<Image src={ project.image } alt={ project.title } data-theme={ project.imageDark ? "light" : "both" } />
+						<Image
+							src={ project.image } alt={ project.title }
+							data-theme={ project.imageDark ? "light" : "both" }
+							loading="eager" />
+
 						{/* This is a workaround since not all images can be theme-adaptive */ }
 						{ project.imageDark &&
-							<Image src={ project.imageDark } alt="" data-theme="dark" />
+							<Image src={ project.imageDark } alt="" data-theme="dark" loading="eager" />
 						}
 
 						<h3>{ project.title }</h3>
@@ -80,7 +84,7 @@ const ProjectsSection: React.FC = () =>
 					</div>
 				) }
 				<Image className={ cls.defaultImg } hidden={ selection !== undefined }
-					src={ projectsImg.src } alt={ projectsImg.alt } />
+					src={ projectsImg.src } alt={ projectsImg.alt } loading="eager" />
 			</div>
 		</section>
 	);
diff --git a/app/_page_sections/SkillsSection.tsx b/app/_page_sections/SkillsSection.tsx
index 0428100..6fdbc41 100644
--- a/app/_page_sections/SkillsSection.tsx
+++ b/app/_page_sections/SkillsSection.tsx
@@ -26,7 +26,7 @@ const SkillsSection: React.FC = () =>
 				{ skills.map((i, index) =>
 					<Image key={ index }
 						src={ i.image.src } alt={ i.image.alt }
-						hidden={ selection !== index } />
+						hidden={ selection !== index } loading="eager" />
 				) }
 
 				{ selection === 4 &&
diff --git a/app/loading.tsx b/app/loading.tsx
index 6ed3c62..5dcb40f 100644
--- a/app/loading.tsx
+++ b/app/loading.tsx
@@ -5,8 +5,8 @@ import cls from "./loading.module.scss";
 
 const LoadingPage: React.FC = () => (
 	<div className={ cls.root } role="alert" aria-label="Loading page">
-		<Image className={ cls.dark } src={ spinnerDark.src } alt={ spinnerDark.alt } priority unoptimized />
-		<Image className={ cls.light } src={ spinnerLight.src } alt={ spinnerLight.alt } priority unoptimized />
+		<Image className={ cls.dark } src={ spinnerDark.src } alt={ spinnerDark.alt } loading="eager" unoptimized />
+		<Image className={ cls.light } src={ spinnerLight.src } alt={ spinnerLight.alt } loading="eager" unoptimized />
 	</div>
 );
 
diff --git a/app/not-found.tsx b/app/not-found.tsx
index f807ffe..fe3db9e 100644
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -24,7 +24,7 @@ const NotFoundPage: React.FC = () => (
 	<main className={ `${cls.page} not-found` }>
 		<div className={ cls.illustration }>
 			<h1>404...</h1>
-			<Image src={ notFoundImage.src } alt={ notFoundImage.alt } priority />
+			<Image src={ notFoundImage.src } alt={ notFoundImage.alt } loading="eager" />
 		</div>
 		<div className={ cls.content }>
 			<div className={ cls.caption }>
diff --git a/app/resume/page.tsx b/app/resume/page.tsx
index 8058b63..ba52cd3 100644
--- a/app/resume/page.tsx
+++ b/app/resume/page.tsx
@@ -25,7 +25,7 @@ const ResumePage: React.FC = () => (
 					<Button className={ cls.button }
 						href={ `/resume/download?type=${i.key}` } download
 						icon={
-							<Image className={ cls.image } src={ i.image.src } priority draggable={ false }
+							<Image className={ cls.image } src={ i.image.src } loading="eager" draggable={ false }
 								aria-hidden alt={ i.image.alt } />
 						}>