From 7f95d8e2523576dc79b37ffdfd0374d37353d287 Mon Sep 17 00:00:00 2001
From: Jonas Braathen <jonas@ponas.no>
Date: Wed, 20 May 2026 00:05:09 +0200
Subject: [PATCH] web: set high fetch priority for top two featured events
 (above the fold on mobile)

---
 web/src/components/events/EventItem.tsx      |  3 +++
 web/src/components/events/FeaturedEvents.tsx | 10 ++++++++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/web/src/components/events/EventItem.tsx b/web/src/components/events/EventItem.tsx
index f662f05..a803389 100644
--- a/web/src/components/events/EventItem.tsx
+++ b/web/src/components/events/EventItem.tsx
@@ -22,6 +22,7 @@ export const EventItem = ({
   mode,
   size,
   imageLoading,
+  imageFetchPriority,
 }: {
   event:
     | SingularEvent
@@ -31,6 +32,7 @@ export const EventItem = ({
   mode: "list" | "calendar" | "singular-time-only";
   size?: "small" | "medium" | "large";
   imageLoading?: "eager" | "lazy";
+  imageFetchPriority?: "high" | "low" | "auto";
 }) => {
   const futureOccurrences = getFutureOccurrences(event);
   const groupedOccurrences = groupConsecutiveDates(
@@ -55,6 +57,7 @@ export const EventItem = ({
             height={0}
             sizes="(max-width: 900px) 100vw, 25vw"
             loading={imageLoading}
+            fetchPriority={imageFetchPriority}
           />
         )}
       </div>
diff --git a/web/src/components/events/FeaturedEvents.tsx b/web/src/components/events/FeaturedEvents.tsx
index 3ddda49..a779954 100644
--- a/web/src/components/events/FeaturedEvents.tsx
+++ b/web/src/components/events/FeaturedEvents.tsx
@@ -9,8 +9,14 @@ export const FeaturedEvents = ({ events }: { events: EventListItemFragment[] })
     <section className={styles.featuredEvents}>
       <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" imageLoading="eager" />
+        {events.slice(0, 3).map((event, index) => (
+          <EventItem
+            key={event.id}
+            event={event}
+            mode="list"
+            imageLoading="eager"
+            imageFetchPriority={index < 2 ? "high" : undefined}
+          />
         ))}
       </ul>
       <SectionFooter link="/arrangementer" linkText="Se alle arrangementer" />