feat: view port observer on lost visibility (#17417)

* refactor: improve types

* feat: add optional isIntersecting param

* feat: add not visible handler

* refactor: improve naming

* runfix: visibility lost on unmount

* docs: add unmount comment

Author: PatrykBuniX

src/script/components/utils/InViewport.tsx

@@ -24,6 +24,7 @@ import {viewportObserver} from 'Util/DOM/viewportObserver';
 
 interface InViewportParams {
   onVisible: () => void;
+  onVisibilityLost?: () => void;
   requireFullyInView?: boolean;
   allowBiggerThanViewport?: boolean;
   /** Will check if the element is overlayed by something else. Can be used to be sure the user could actually see the element. Should not be used to do lazy loading as the overlayObserver has quite a long debounce time */
@@ -33,6 +34,7 @@ interface InViewportParams {
 const InViewport: React.FC<InViewportParams & React.HTMLProps<HTMLDivElement>> = ({
   children,
   onVisible,
+  onVisibilityLost,
   requireFullyInView = false,
   checkOverlay = false,
   allowBiggerThanViewport = false,
@@ -58,15 +60,23 @@ const InViewport: React.FC<InViewportParams & React.HTMLProps<HTMLDivElement>> =
     const triggerCallbackIfVisible = () => {
       if (inViewport && visible) {
         onVisible();
-        releaseTrackers();
+
+        if (!onVisibilityLost) {
+          releaseTrackers();
+        }
       }
     };
 
     viewportObserver.trackElement(
       element,
-      (isInViewport: boolean) => {
+      (isInViewport: boolean, isPartiallyVisible: boolean) => {
         inViewport = isInViewport;
         triggerCallbackIfVisible();
+
+        // If the element is not intersecting at all, we can trigger the onVisibilityLost callback
+        if (!isPartiallyVisible) {
+          onVisibilityLost?.();
+        }
       },
       requireFullyInView,
       allowBiggerThanViewport,
@@ -77,8 +87,12 @@ const InViewport: React.FC<InViewportParams & React.HTMLProps<HTMLDivElement>> =
         triggerCallbackIfVisible();
       });
     }
-    return () => releaseTrackers();
-  }, [allowBiggerThanViewport, requireFullyInView, checkOverlay, onVisible]);
+    return () => {
+      // If the element is unmounted, we can trigger the onVisibilityLost callback and release the trackers
+      onVisibilityLost?.();
+      releaseTrackers();
+    };
+  }, [allowBiggerThanViewport, requireFullyInView, checkOverlay, onVisible, onVisibilityLost]);
 
   return (
     <div ref={domNode} {...props} css={{minHeight: '1px'}}>

src/script/util/DOM/viewportObserver.ts

@@ -17,12 +17,21 @@
  *
  */
 
-const observedElements = new Map();
+const observedElements = new Map<
+  Element,
+  {
+    allowBiggerThanViewport?: boolean;
+    requireFullyInView?: boolean;
+    onVisible?: Function;
+    onVisibilityChange?: (isVisible: boolean, isPartiallyVisible: boolean) => void;
+  }
+>();
 const tolerance = 0.8;
 
 const onIntersect: IntersectionObserverCallback = entries => {
   entries.forEach(({intersectionRatio, isIntersecting, target: element, rootBounds}) => {
-    const {onVisible, onChange, requireFullyInView, allowBiggerThanViewport} = observedElements.get(element) || {};
+    const {onVisible, onVisibilityChange, requireFullyInView, allowBiggerThanViewport} =
+      observedElements.get(element) || {};
     const isFullyInView = intersectionRatio >= tolerance;
 
     const isBiggerThanRoot = () => {
@@ -35,11 +44,11 @@ const onIntersect: IntersectionObserverCallback = entries => {
 
     const isVisible = isIntersecting && (!requireFullyInView || isFullyInView || isBiggerThanRoot());
 
-    if (onChange) {
-      onChange(isVisible);
+    if (onVisibilityChange) {
+      onVisibilityChange(!!isVisible, isIntersecting);
     } else if (isVisible) {
       removeElement(element);
-      return onVisible && onVisible();
+      return onVisible?.();
     }
   });
 };
@@ -72,18 +81,22 @@ const onElementInViewport = (
  * Will track an element and trigger the callback whenever the intersecting state changes
  *
  * @param element the element to observe
- * @param onChange the callback to call when the element intersects or not
+ * @param onVisibilityChange the callback to call when the element intersects or not
  * @param requireFullyInView should the element be fully in view
  * @param allowBiggerThanViewport should fire when element is bigger than viewport
  */
 const trackElement = (
   element: HTMLElement,
-  onChange: Function,
+  onVisibilityChange: (isVisible: boolean, isPartiallyVisible: boolean) => void,
   requireFullyInView = false,
   allowBiggerThanViewport = false,
 ): void => {
   if (element) {
-    observedElements.set(element, {allowBiggerThanViewport, onChange, requireFullyInView});
+    observedElements.set(element, {
+      allowBiggerThanViewport,
+      onVisibilityChange,
+      requireFullyInView,
+    });
     return observer.observe(element);
   }
 };