Add onHidden to useVisible

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

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,

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

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

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]);
 }