From 66fd96a8c5298a111c9f0c92a4dbff33b4611400 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Mon, 27 Jan 2025 20:14:22 -0600
Subject: [PATCH] Add onHidden to useVisible

---
 src/components/OGTile.tsx                      |  4 ++--
 src/photo/PhotoLarge.tsx                       |  4 ++--
 src/photo/PhotoMedium.tsx                      |  4 ++--
 src/photo/PhotoSmall.tsx                       |  4 ++--
 src/utility/{useOnVisible.ts => useVisible.ts} | 17 ++++++++++++-----
 5 files changed, 20 insertions(+), 13 deletions(-)
 rename src/utility/{useOnVisible.ts => useVisible.ts} (59%)

diff --git a/src/components/OGTile.tsx b/src/components/OGTile.tsx
index 9c9dd4cd..6cb56b18 100644
--- a/src/components/OGTile.tsx
+++ b/src/components/OGTile.tsx
@@ -6,7 +6,7 @@ import Link from 'next/link';
 import { BiError } from 'react-icons/bi';
 import Spinner from '@/components/Spinner';
 import { IMAGE_OG_DIMENSION } from '../image-response';
-import useOnVisible from '@/utility/useOnVisible';
+import useVisible from '@/utility/useVisible';
 
 export type OGLoadingState = 'unloaded' | 'loading' | 'loaded' | 'failed';
 
@@ -51,7 +51,7 @@ export default function OGTile({
 
   const { width, height, aspectRatio } = IMAGE_OG_DIMENSION;
 
-  useOnVisible(ref, onVisible);
+  useVisible({ ref, onVisible });
 
   return (
     <Link
diff --git a/src/photo/PhotoLarge.tsx b/src/photo/PhotoLarge.tsx
index 14bd31f6..437ae88f 100644
--- a/src/photo/PhotoLarge.tsx
+++ b/src/photo/PhotoLarge.tsx
@@ -33,7 +33,7 @@ import {
 import AdminPhotoMenuClient from '@/admin/AdminPhotoMenuClient';
 import { RevalidatePhoto } from './InfinitePhotoScroll';
 import { useRef } from 'react';
-import useOnVisible from '@/utility/useOnVisible';
+import useVisible from '@/utility/useVisible';
 import PhotoDate from './PhotoDate';
 import { useAppState } from '@/state/AppState';
 import useImageZoomControls from '@/components/image/useImageZoomControls';
@@ -102,7 +102,7 @@ export default function PhotoLarge({
   const showTagsContent = tags.length > 0;
   const showExifContent = shouldShowExifDataForPhoto(photo);
 
-  useOnVisible(ref, onVisible);
+  useVisible({ ref, onVisible });
 
   const { open } = useImageZoomControls(
     refZoomControlsContainer,
diff --git a/src/photo/PhotoMedium.tsx b/src/photo/PhotoMedium.tsx
index 6543c00e..3036b2fa 100644
--- a/src/photo/PhotoMedium.tsx
+++ b/src/photo/PhotoMedium.tsx
@@ -11,7 +11,7 @@ import { clsx } from 'clsx/lite';
 import { pathForPhoto } from '@/site/paths';
 import { SHOULD_PREFETCH_ALL_LINKS } from '@/site/config';
 import { useRef } from 'react';
-import useOnVisible from '@/utility/useOnVisible';
+import useVisible from '@/utility/useVisible';
 import LinkWithStatus from '@/components/LinkWithStatus';
 import Spinner from '@/components/Spinner';
 
@@ -36,7 +36,7 @@ export default function PhotoMedium({
 } & PhotoSetCategory) {
   const ref = useRef<HTMLAnchorElement>(null);
 
-  useOnVisible(ref, onVisible);
+  useVisible({ ref, onVisible });
 
   return (
     <LinkWithStatus
diff --git a/src/photo/PhotoSmall.tsx b/src/photo/PhotoSmall.tsx
index 65069710..9e7143d4 100644
--- a/src/photo/PhotoSmall.tsx
+++ b/src/photo/PhotoSmall.tsx
@@ -10,7 +10,7 @@ import { clsx } from 'clsx/lite';
 import { pathForPhoto } from '@/site/paths';
 import { SHOULD_PREFETCH_ALL_LINKS } from '@/site/config';
 import { useRef } from 'react';
-import useOnVisible from '@/utility/useOnVisible';
+import useVisible from '@/utility/useVisible';
 
 export default function PhotoSmall({
   photo,
@@ -31,7 +31,7 @@ export default function PhotoSmall({
 } & PhotoSetCategory) {
   const ref = useRef<HTMLAnchorElement>(null);
 
-  useOnVisible(ref, onVisible);
+  useVisible({ ref, onVisible });
 
   return (
     <Link
diff --git a/src/utility/useOnVisible.ts b/src/utility/useVisible.ts
similarity index 59%
rename from src/utility/useOnVisible.ts
rename to src/utility/useVisible.ts
index 017a17bc..9dc26fbc 100644
--- a/src/utility/useOnVisible.ts
+++ b/src/utility/useVisible.ts
@@ -1,14 +1,21 @@
 import { useEffect } from 'react';
 
-export default function useOnVisible(
+export default function useVisible({
+  ref,
+  onVisible,
+  onHidden,
+}: {
   ref: React.RefObject<HTMLElement | null>,
   onVisible?: () => void,
-) {
+  onHidden?: () => void,
+}) {
   useEffect(() => {
-    if (onVisible && ref.current) {
+    if (ref.current && (onVisible || onHidden)) {
       const observer = new IntersectionObserver(e => {
         if (e[0].isIntersecting) {
-          onVisible();
+          onVisible?.();
+        } else {
+          onHidden?.();
         }
       }, {
         root: null,
@@ -17,5 +24,5 @@ export default function useOnVisible(
       observer.observe(ref.current);
       return () => observer.disconnect();
     }
-  }, [ref, onVisible]);
+  }, [ref, onVisible, onHidden]);
 }