From 4a264c589dd9a86a6968d7efed6e1dc1f917d783 Mon Sep 17 00:00:00 2001
From: Jonas Braathen <jonas@ponas.no>
Date: Tue, 19 May 2026 21:32:56 +0200
Subject: [PATCH] web: add eager loading to featured event images on home page

---
 web/src/components/events/EventItem.tsx      | 3 +++
 web/src/components/events/FeaturedEvents.tsx | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/web/src/components/events/EventItem.tsx b/web/src/components/events/EventItem.tsx
index fcc0a7d..ad90ad2 100644
--- a/web/src/components/events/EventItem.tsx
+++ b/web/src/components/events/EventItem.tsx
@@ -20,10 +20,12 @@ export const EventItem = ({
   event,
   mode,
   size,
+  imageLoading,
 }: {
   event: SingularEvent | EventFragment;
   mode: "list" | "calendar" | "singular-time-only";
   size?: "small" | "medium" | "large";
+  imageLoading?: "eager" | "lazy";
 }) => {
   const futureOccurrences = getFutureOccurrences(event);
   const groupedOccurrences = groupConsecutiveDates(
@@ -47,6 +49,7 @@ export const EventItem = ({
             width={0}
             height={0}
             sizes="(max-width: 900px) 100vw, 25vw"
+            loading={imageLoading}
           />
         )}
       </div>
diff --git a/web/src/components/events/FeaturedEvents.tsx b/web/src/components/events/FeaturedEvents.tsx
index 3524a4b..cbdcbd9 100644
--- a/web/src/components/events/FeaturedEvents.tsx
+++ b/web/src/components/events/FeaturedEvents.tsx
@@ -10,7 +10,7 @@ export const FeaturedEvents = ({ events }: { events: EventFragment[] }) => {
       <SectionHeader heading="Arrangementer" link="/arrangementer" linkText="Se alle arrangementer" />
       <ul className={styles.eventList}>
         {events.slice(0, 3).map((event) => (
-          <EventItem key={event.id} event={event} mode="list" />
+          <EventItem key={event.id} event={event} mode="list" imageLoading="eager" />
         ))}
       </ul>
       <SectionFooter link="/arrangementer" linkText="Se alle arrangementer" />