chore: replace priority attribute with loading="eager" for images

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.main } src={ profilePicture.src } alt={ profilePicture.alt } loading="eager" />
-			<Image className={ cls.secondary } src={ homeDecor.src } alt={ homeDecor.alt } />
+			<Image className={ cls.secondary } src={ homeDecor.src } alt={ homeDecor.alt } loading="eager" />
 		</div>
 	</section>
 );

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>

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>
 	);

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 &&

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.dark } src={ spinnerDark.src } alt={ spinnerDark.alt } loading="eager" unoptimized />
-		<Image className={ cls.light } src={ spinnerLight.src } alt={ spinnerLight.alt } priority unoptimized />
+		<Image className={ cls.light } src={ spinnerLight.src } alt={ spinnerLight.alt } loading="eager" unoptimized />
 	</div>
 );
 

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 }>

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 } />
 						}>