From 69ae53809b127a3491c609c6e7b21c74f6c2b22d Mon Sep 17 00:00:00 2001
From: denshooter <dennis@konkol.net>
Date: Thu, 5 Mar 2026 19:25:38 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20Safari=20compatibility=20=E2=80=94=20pol?=
 =?UTF-8?q?yfill=20requestIdleCallback=20and=20IntersectionObserver?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

requestIdleCallback is unavailable in Safari < 16.4, causing GatedProviders
to crash during hydration and blank the entire page. Added setTimeout fallback.
Also added IntersectionObserver fallback in ScrollFadeIn for safety.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 app/components/ClientProviders.tsx | 11 +++++++++--
 app/components/ScrollFadeIn.tsx    |  6 ++++++
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/app/components/ClientProviders.tsx b/app/components/ClientProviders.tsx
index ffb498d..d9c9eea 100644
--- a/app/components/ClientProviders.tsx
+++ b/app/components/ClientProviders.tsx
@@ -56,8 +56,15 @@ function GatedProviders({
   const [deferredReady, setDeferredReady] = useState(false);
   useEffect(() => {
     if (!mounted) return;
-    const id = requestIdleCallback(() => setDeferredReady(true), { timeout: 5000 });
-    return () => cancelIdleCallback(id);
+    // Safari < 16.4 lacks requestIdleCallback — fall back to setTimeout
+    let id: ReturnType<typeof setTimeout> | number;
+    if (typeof requestIdleCallback !== "undefined") {
+      id = requestIdleCallback(() => setDeferredReady(true), { timeout: 5000 });
+      return () => cancelIdleCallback(id as number);
+    } else {
+      id = setTimeout(() => setDeferredReady(true), 1);
+      return () => clearTimeout(id);
+    }
   }, [mounted]);
 
   return (
diff --git a/app/components/ScrollFadeIn.tsx b/app/components/ScrollFadeIn.tsx
index dd1194e..ae8ae45 100644
--- a/app/components/ScrollFadeIn.tsx
+++ b/app/components/ScrollFadeIn.tsx
@@ -24,6 +24,12 @@ export default function ScrollFadeIn({ children, className = "", delay = 0 }: Sc
     const el = ref.current;
     if (!el) return;
 
+    // Fallback for browsers without IntersectionObserver
+    if (typeof IntersectionObserver === "undefined") {
+      setIsVisible(true);
+      return;
+    }
+
     const observer = new IntersectionObserver(
       ([entry]) => {
         if (entry.isIntersecting) {