From 8518bd216cd291bb5471d5fb9767554ffb67f511 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Mon, 20 Jan 2025 13:33:12 -0600
Subject: [PATCH] Add spinner to loading photo thumbs

---
 src/photo/PhotoMedium.tsx | 32 ++++++++++++++++++++++----------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/photo/PhotoMedium.tsx b/src/photo/PhotoMedium.tsx
index 085bba98..cd6feb0a 100644
--- a/src/photo/PhotoMedium.tsx
+++ b/src/photo/PhotoMedium.tsx
@@ -13,6 +13,7 @@ import { SHOULD_PREFETCH_ALL_LINKS } from '@/site/config';
 import { useRef } from 'react';
 import useOnVisible from '@/utility/useOnVisible';
 import LinkWithStatus from '@/components/LinkWithStatus';
+import Spinner from '@/components/Spinner';
 
 export default function PhotoMedium({
   photo,
@@ -48,16 +49,27 @@ export default function PhotoMedium({
       )}
       prefetch={prefetch}
     >
-      <ImageMedium
-        src={photo.url}
-        aspectRatio={photo.aspectRatio}
-        blurDataURL={photo.blurData}
-        blurCompatibilityMode={doesPhotoNeedBlurCompatibility(photo)}
-        className="flex object-cover w-full h-full"
-        imgClassName="object-cover w-full h-full"
-        alt={altTextForPhoto(photo)}
-        priority={priority}
-      />
+      {({ isLoading }) =>
+        <div>
+          {isLoading &&
+            <div className={clsx(
+              'absolute inset-0 flex items-center justify-center',
+              'text-white bg-black/25',
+              'z-10',
+            )}>
+              <Spinner size={20} color="text" />
+            </div>}
+          <ImageMedium
+            src={photo.url}
+            aspectRatio={photo.aspectRatio}
+            blurDataURL={photo.blurData}
+            blurCompatibilityMode={doesPhotoNeedBlurCompatibility(photo)}
+            className="flex object-cover w-full h-full "
+            imgClassName="object-cover w-full h-full"
+            alt={altTextForPhoto(photo)}
+            priority={priority}
+          />
+        </div>}
     </LinkWithStatus>
   );
 };