From cb9b108526f6be6e4bb7f3fa4823b8fdbdcdc16b Mon Sep 17 00:00:00 2001
From: Jonas Braathen <jonas@ponas.no>
Date: Tue, 19 May 2026 22:50:33 +0200
Subject: [PATCH] web: don't start loading pig pattern until user starts to
 approach it

---
 web/src/components/layout/Footer.tsx         |  8 ++-----
 web/src/components/layout/PigPattern.tsx     | 22 ++++++++++++++++++++
 web/src/components/layout/footer.module.scss | 15 +++++++------
 3 files changed, 33 insertions(+), 12 deletions(-)
 create mode 100644 web/src/components/layout/PigPattern.tsx

diff --git a/web/src/components/layout/Footer.tsx b/web/src/components/layout/Footer.tsx
index a76581c..4e78625 100644
--- a/web/src/components/layout/Footer.tsx
+++ b/web/src/components/layout/Footer.tsx
@@ -1,7 +1,7 @@
 import Link from "next/link";
 import styles from "./footer.module.scss";
 import { NeonChillPig } from "../general/pigs/fun/NeonChillPig";
-import { ToTop } from "./ToTop";
+import { PigPattern } from "./PigPattern";
 import { Icon } from "../general/Icon";
 import {
   getOpeningHours,
@@ -145,11 +145,7 @@ export const Footer = () => {
           <NeonChillPig />
         </div>
       </footer>
-      <div className={styles.pigPattern}>
-        <div className={styles.toTop}>
-          <ToTop />
-        </div>
-      </div>
+      <PigPattern />
     </>
   );
 };
diff --git a/web/src/components/layout/PigPattern.tsx b/web/src/components/layout/PigPattern.tsx
new file mode 100644
index 0000000..686b428
--- /dev/null
+++ b/web/src/components/layout/PigPattern.tsx
@@ -0,0 +1,22 @@
+"use client";
+import { useInView } from "react-intersection-observer";
+import styles from "./footer.module.scss";
+import { ToTop } from "./ToTop";
+
+export const PigPattern = () => {
+  const { ref, inView } = useInView({
+    triggerOnce: true,
+    rootMargin: "1000px",
+  });
+
+  return (
+    <div
+      ref={ref}
+      className={`${styles.pigPattern} ${inView ? styles.loaded : ""}`}
+    >
+      <div className={styles.toTop}>
+        <ToTop />
+      </div>
+    </div>
+  );
+};
diff --git a/web/src/components/layout/footer.module.scss b/web/src/components/layout/footer.module.scss
index e514665..44153a6 100644
--- a/web/src/components/layout/footer.module.scss
+++ b/web/src/components/layout/footer.module.scss
@@ -101,7 +101,6 @@
 
 .pigPattern {
   background-color: var(--color-background);
-  background-image: url("/assets/graphics/grisemonster-800.png");
   background-size: 100% auto;
   background-position: 0 100%;
   background-attachment: fixed;
@@ -111,12 +110,16 @@
   position: relative;
   z-index: 700;
 
-  @media (min-width: 601px) {
-    background-image: url("/assets/graphics/grisemonster-1280.png");
-  }
+  &.loaded {
+    background-image: url("/assets/graphics/grisemonster-800.png");
 
-  @media (min-width: 1281px) {
-    background-image: url("/assets/graphics/grisemonster-2048.png");
+    @media (min-width: 601px) {
+      background-image: url("/assets/graphics/grisemonster-1280.png");
+    }
+
+    @media (min-width: 1281px) {
+      background-image: url("/assets/graphics/grisemonster-2048.png");
+    }
   }
 
   @media (orientation: landscape) {