web: add eager loading to featured event images on home page

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>

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