web: dynamically load swiper

web/src/components/blocks/Blocks.tsx

@@ -1,7 +1,11 @@
+import dynamic from "next/dynamic";
 import { RichTextBlock } from "./RichTextBlock";
 import { ImageWithTextBlock } from "./ImageWithTextBlock";
-import { ImageSliderBlock } from "./ImageSliderBlock";
 import { HorizontalRuleBlock } from "./HorizontalRuleBlock";
+
+const ImageSliderBlock = dynamic(() =>
+  import("./ImageSliderBlock").then((m) => m.ImageSliderBlock)
+);
 import { FeaturedBlock } from "./FeaturedBlock";
 import { AccordionBlock } from "./AccordionBlock";
 import { EmbedBlock } from "./EmbedBlock";

web/src/components/layout/Footer.tsx

@@ -1,12 +1,12 @@
-import Link from "next/link";
-import styles from "./footer.module.scss";
-import { NeonChillPig } from "../general/pigs/fun/NeonChillPig";
-import { PigPattern } from "./PigPattern";
-import { Icon } from "../general/Icon";
 import {
   getOpeningHours,
   getTodaysOpeningHoursForFunction,
 } from "@/lib/openinghours";
+import Link from "next/link";
+import { Icon } from "../general/Icon";
+// import { NeonChillPig } from "../general/pigs/fun/NeonChillPig";
+import styles from "./footer.module.scss";
+import { PigPattern } from "./PigPattern";
 
 async function OpeningHoursTable() {
   const allOpeningHours = await getOpeningHours();
@@ -141,9 +141,9 @@ export const Footer = () => {
             </div>
           </div>
         </div>
-        <div className={styles.pig}>
+        {/* <div className={styles.pig}>
           <NeonChillPig />
-        </div>
+        </div> */}
       </footer>
       <PigPattern />
     </>

web/src/components/venues/VenuePageView.tsx

@@ -1,15 +1,17 @@
+import dynamic from "next/dynamic";
 import { VenueFragment } from "@/gql/graphql";
 import { getClient } from "@/app/client";
-import {
+import { ImageSliderBlockFragmentDefinition } from "@/components/blocks/ImageSliderBlock";
-  ImageSliderBlock,
-  ImageSliderBlockFragmentDefinition,
-} from "@/components/blocks/ImageSliderBlock";
 import { Breadcrumb } from "@/components/general/Breadcrumb";
 import { PageContent } from "@/components/general/PageContent";
 import { NeufMap } from "@/components/venues/NeufMap";
 import { VenueInfo } from "@/components/venues/VenueInfo";
 import { graphql, unmaskFragment } from "@/gql";
 
+const ImageSliderBlock = dynamic(() =>
+  import("@/components/blocks/ImageSliderBlock").then((m) => m.ImageSliderBlock)
+);
+
 const venueBySlugQuery = graphql(`
   query venueBySlug($slug: String!) {
     venue: page(contentType: "venues.VenuePage", slug: $slug) {