From c7576b43ac2171e399cafbf4d7905ebb7ee8be7a Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Mon, 20 Jan 2025 13:11:27 -0600
Subject: [PATCH] Introduce loading status to thumbnails

---
 src/components/LinkWithStatus.tsx | 15 ++++++++++++---
 src/photo/PhotoMedium.tsx         |  6 +++---
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/components/LinkWithStatus.tsx b/src/components/LinkWithStatus.tsx
index 5655454d..6b00bf2c 100644
--- a/src/components/LinkWithStatus.tsx
+++ b/src/components/LinkWithStatus.tsx
@@ -17,10 +17,15 @@ const FLICKER_THRESHOLD = 400;
 // Clear loading status after long duration
 const MAX_LOADING_DURATION = 15_000;
 
-export type LinkWithStatusProps = ComponentProps<typeof Link> & {
+export type LinkWithStatusProps = Omit<
+  ComponentProps<typeof Link>, 'children'
+> & {
   loadingElement?: ReactNode
   loadingClassName?: string
   contentClassName?: string
+  children: ReactNode | ((props: {
+    isLoading: boolean
+  }) => ReactNode)
 }
 
 export default function LinkWithStatus({
@@ -44,6 +49,8 @@ export default function LinkWithStatus({
   const stopLoadingTimeout = useRef<NodeJS.Timeout | undefined>(undefined);
   const maxLoadingTimeout = useRef<NodeJS.Timeout | undefined>(undefined);
 
+  const isControlled = typeof children === 'function';
+
   const clearTimeouts = useCallback(() => {
     [startLoadingTimeout, stopLoadingTimeout, maxLoadingTimeout]
       .forEach(timeout => {
@@ -114,11 +121,13 @@ export default function LinkWithStatus({
       contentClassName,
       loadingElement
         ? isLoading ? 'opacity-0' : 'opacity-100'
-        : loadingClassName
+        : (loadingClassName || isControlled)
           ? 'opacity-100'
           : isLoading ? 'opacity-50' : 'opacity-100',
     )}>
-      {children}
+      {typeof children === 'function'
+        ? children({ isLoading })
+        : children}
     </span>
     {isLoading && loadingElement && <span className={clsx(
       'absolute inset-0',
diff --git a/src/photo/PhotoMedium.tsx b/src/photo/PhotoMedium.tsx
index cc1d2225..085bba98 100644
--- a/src/photo/PhotoMedium.tsx
+++ b/src/photo/PhotoMedium.tsx
@@ -7,12 +7,12 @@ import {
   doesPhotoNeedBlurCompatibility,
 } from '.';
 import ImageMedium from '@/components/image/ImageMedium';
-import Link from 'next/link';
 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 LinkWithStatus from '@/components/LinkWithStatus';
 
 export default function PhotoMedium({
   photo,
@@ -38,7 +38,7 @@ export default function PhotoMedium({
   useOnVisible(ref, onVisible);
 
   return (
-    <Link
+    <LinkWithStatus
       ref={ref}
       href={pathForPhoto({ photo, tag, camera, simulation, focal })}
       className={clsx(
@@ -58,6 +58,6 @@ export default function PhotoMedium({
         alt={altTextForPhoto(photo)}
         priority={priority}
       />
-    </Link>
+    </LinkWithStatus>
   );
 };