avoid layout shifts on event index page

web/src/app/arrangementer/page.tsx

@@ -18,7 +18,12 @@ export async function generateMetadata(
   return getSeoMetadata(data.index as EventIndexFragment, parent);
 }
 
-export default async function Page() {
+export default async function Page({
+  searchParams,
+}: {
+  searchParams?: Promise<Record<string, string | string[] | undefined>>;
+}) {
+  await searchParams;
   const props = await loadEventIndexProps();
   return <EventIndexView {...props} />;
 }

web/src/components/events/EventIndexView.tsx

@@ -1,4 +1,3 @@
-import { Suspense } from "react";
 import { VenueFragment } from "@/gql/graphql";
 import { getClient } from "@/app/client";
 import { EventContainer } from "@/components/events/EventContainer";
@@ -46,14 +45,12 @@ export function EventIndexView({
   return (
     <main className="site-main" id="main">
       <PageHeader heading="Dette skjer på Chateau Neuf" align="left" />
-      <Suspense>
-        <EventContainer
-          events={events}
-          eventCategories={eventCategories}
-          eventOrganizers={eventOrganizers}
-          venues={venues}
-        />
-      </Suspense>
+      <EventContainer
+        events={events}
+        eventCategories={eventCategories}
+        eventOrganizers={eventOrganizers}
+        venues={venues}
+      />
     </main>
   );
 }

web/src/components/events/eventContainer.module.scss

@@ -1,3 +1,8 @@
+.events {
+  // keep the footer below the fold while the event list renders
+  min-height: 100vh;
+}
+
 .eventWrapper {
   //margin: calc(var(--spacing-sitepadding-block)*-1) calc(var(--spacing-sitepadding-inline)*-1);
 }