From c9377b75430c9e641a9f620dc9bb1537c753f40f Mon Sep 17 00:00:00 2001
From: Claas Augner <495429+caugner@users.noreply.github.com>
Date: Mon, 4 Nov 2024 17:18:13 +0100
Subject: [PATCH] refactor(hooks): make `useViewed()` reusable (#12067)

* Add intersectionObserverOptions for useViewed

* fix(hooks): disable IntersectionObserver on view

* Revert "fix(hooks): disable IntersectionObserver on view"

This reverts commit 75918ea892b9420e15899f5734bc20138a5188fb.

---------

Co-authored-by: Florian Dieminger <me@fiji-flo.de>
---
 client/src/hooks.ts | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/client/src/hooks.ts b/client/src/hooks.ts
index 9a691f443c15..7466b61fe6aa 100644
--- a/client/src/hooks.ts
+++ b/client/src/hooks.ts
@@ -280,15 +280,18 @@ interface ViewedTimer {
   timeout: number | null;
 }
 
-export function useViewed(callback: Function) {
-  const timer = useRef<ViewedTimer>({ timeout: null });
-  const isVisible = usePageVisibility();
-  const [node, setNode] = useState<HTMLElement>();
-  const isIntersecting = useIsIntersecting(node, {
+export function useViewed(
+  callback: Function,
+  intersectionObserverOptions: IntersectionObserverInit = {
     root: null,
     rootMargin: "0px",
     threshold: 0.5,
-  });
+  }
+) {
+  const timer = useRef<ViewedTimer>({ timeout: null });
+  const isVisible = usePageVisibility();
+  const [node, setNode] = useState<HTMLElement>();
+  const isIntersecting = useIsIntersecting(node, intersectionObserverOptions);
 
   useEffect(() => {
     if (timer.current.timeout !== -1) {