From 19d76d47ea6cfbecfe4b225dbfef55dd0a5cd0b8 Mon Sep 17 00:00:00 2001
From: Damjan Savic <info@damjan-savic.com>
Date: Sun, 25 Jan 2026 06:41:49 +0100
Subject: [PATCH] fix: add SSR safety and fix memory leak (qa-requested)

- Add 'use client' directive to GlobalBackground component
- Fix SSR-unsafe document access in usePageVisibility hook
- Fix memory leak in useIntersectionObserver cleanup function

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/components/layout/GlobalBackground.tsx |  2 ++
 src/hooks/useIntersectionObserver.ts       | 10 ++++++----
 src/hooks/usePageVisibility.ts             |  4 +++-
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/layout/GlobalBackground.tsx b/src/components/layout/GlobalBackground.tsx
index a33ccd2..911be1d 100644
--- a/src/components/layout/GlobalBackground.tsx
+++ b/src/components/layout/GlobalBackground.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { usePageVisibility } from '@/hooks/usePageVisibility';
 import { useIntersectionObserver } from '@/hooks/useIntersectionObserver';
 
diff --git a/src/hooks/useIntersectionObserver.ts b/src/hooks/useIntersectionObserver.ts
index e93a40b..f2a1c6e 100644
--- a/src/hooks/useIntersectionObserver.ts
+++ b/src/hooks/useIntersectionObserver.ts
@@ -30,14 +30,16 @@ export const useIntersectionObserver = <T extends HTMLElement = HTMLDivElement>(
       }
     );
 
-    if (ref.current) {
-      observer.observe(ref.current);
+    const element = ref.current;
+    if (element) {
+      observer.observe(element);
     }
 
     return () => {
-      if (ref.current) {
-        observer.unobserve(ref.current);
+      if (element) {
+        observer.unobserve(element);
       }
+      observer.disconnect();
     };
   }, [threshold, root, rootMargin]);
 
diff --git a/src/hooks/usePageVisibility.ts b/src/hooks/usePageVisibility.ts
index 5eb0083..993e0d3 100644
--- a/src/hooks/usePageVisibility.ts
+++ b/src/hooks/usePageVisibility.ts
@@ -5,7 +5,9 @@ import { useState, useEffect } from 'react';
  * @returns boolean - true when page is visible, false when hidden
  */
 export const usePageVisibility = (): boolean => {
-  const [isVisible, setIsVisible] = useState<boolean>(!document.hidden);
+  const [isVisible, setIsVisible] = useState<boolean>(() =>
+    typeof document !== 'undefined' ? !document.hidden : true
+  );
 
   useEffect(() => {
     const handleVisibilityChange = () => {