From 22f92f1ee3d9d734aef6657679591254dd06a603 Mon Sep 17 00:00:00 2001
From: Cao Hoang <65607230+cnhhoang850@users.noreply.github.com>
Date: Fri, 3 Jan 2025 06:58:40 +0700
Subject: [PATCH] fix: improve useInViewObserver hook to trigger when observer
 is already in view on mount (#18446)

---
 packages/lib/hooks/useInViewObserver.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/lib/hooks/useInViewObserver.ts b/packages/lib/hooks/useInViewObserver.ts
index 7396f2be46..6e3954daf9 100644
--- a/packages/lib/hooks/useInViewObserver.ts
+++ b/packages/lib/hooks/useInViewObserver.ts
@@ -14,6 +14,11 @@ export const useInViewObserver = (onInViewCallback: () => void, root?: Element |
       return;
     }
 
+    if (node && node.getBoundingClientRect().top < window.innerHeight) {
+      // Trigger callback immediately if element is already in view on mount
+      onInViewCallback();
+    }
+
     let observer: IntersectionObserver;
     if (node && node.parentElement) {
       observer = new IntersectionObserver(
@@ -35,7 +40,7 @@ export const useInViewObserver = (onInViewCallback: () => void, root?: Element |
         observer.disconnect();
       }
     };
-  }, [node]);
+  }, [onInViewCallback, node]);
 
   return {
     ref: setRef,