RHL-046 feat(overview): enhance OverviewCard with customizable image loading attributes

components/overview/OverviewCard.jsx

@@ -17,6 +17,9 @@ export default function OverviewCard({
 	href = null,
 	disabledHint = null,
 	containerClassName = "",
+	imageLoading = "lazy",
+	imageFetchPriority = "auto",
+	imageDecoding = "async",
 }) {
 	const isDisabled = !href;
 
@@ -36,7 +39,9 @@ export default function OverviewCard({
 					src={imageSrc}
 					alt={`${title} Karte`}
 					className="h-full w-full object-cover"
-					loading="lazy"
+					loading={imageLoading}
+					fetchPriority={imageFetchPriority}
+					decoding={imageDecoding}
 				/>
 			</div>
 

components/overview/OverviewHomePage.jsx

@@ -41,7 +41,7 @@ export default function OverviewHomePage() {
 
 				<div className="flex flex-1 items-center justify-center pt-20 pb-10">
 					<div className={cardsRowClassName}>
-						{cards.map((card) => (
+						{cards.map((card, index) => (
 							<OverviewCard
 								key={card.key}
 								title={card.title}
@@ -50,6 +50,9 @@ export default function OverviewHomePage() {
 								href={card.href}
 								disabledHint={card.disabledHint}
 								containerClassName={cardItemClassName}
+								imageLoading="eager"
+								imageFetchPriority={index < 2 ? "high" : "auto"}
+								imageDecoding="async"
 							/>
 						))}
 					</div>