From 5c64b358bb062833403c056ec514d177a029677c Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Mon, 17 Jun 2024 00:29:50 -0500
Subject: [PATCH] Improve batch photo sync status

---
 src/admin/AdminOutdatedClient.tsx | 25 +++++++++++++++++--------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/admin/AdminOutdatedClient.tsx b/src/admin/AdminOutdatedClient.tsx
index 85e017ae..1c2ea4e0 100644
--- a/src/admin/AdminOutdatedClient.tsx
+++ b/src/admin/AdminOutdatedClient.tsx
@@ -22,6 +22,8 @@ export default function AdminOutdatedClient({
 }) {
   const [photoIdsSyncing, setPhotoIdsSyncing] = useState<string[]>([]);
 
+  const arePhotoIdsSyncing = photoIdsSyncing.length > 0;
+
   const router = useRouter();
 
   return (
@@ -41,8 +43,10 @@ export default function AdminOutdatedClient({
         hideTextOnMobile={false}
         className="primary"
         onClick={async () => {
-          // eslint-disable-next-line max-len
-          if (window.confirm(`Are you sure you want to sync the oldest ${UPDATE_BATCH_SIZE} photos? This action cannot be undone.`)) {
+          if (window.confirm(
+            // eslint-disable-next-line max-len
+            `Are you sure you want to sync the oldest ${UPDATE_BATCH_SIZE} photos? This action cannot be undone.`
+          )) {
             const photosToSync = photos
               .slice(0, UPDATE_BATCH_SIZE)
               .map(photo => photo.id);
@@ -54,13 +58,18 @@ export default function AdminOutdatedClient({
               });
           }
         }}
+        isLoading={arePhotoIdsSyncing}
       >
-        <span className="hidden sm:inline-block">
-          Sync {UPDATE_BATCH_SIZE} Oldest Photos
-        </span>
-        <span className="sm:hidden">
-          Sync {UPDATE_BATCH_SIZE} Oldest
-        </span>
+        {arePhotoIdsSyncing
+          ? 'Syncing'
+          : <>
+            <span className="hidden sm:inline-block">
+              Sync {UPDATE_BATCH_SIZE} Oldest Photos
+            </span>
+            <span className="sm:hidden">
+              Sync {UPDATE_BATCH_SIZE} Oldest
+            </span>
+          </>}
       </LoaderButton>}
     >
       <div className="space-y-6">