From 7d3cef4f9dca5a75e2997755f8cff3eb677b17be Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Wed, 3 Jul 2024 13:56:11 -0500
Subject: [PATCH] Refine upload UX, fix add all progress indicator

---
 src/admin/AdminAddAllUploads.tsx | 16 +++++++++++-----
 src/components/ImageInput.tsx    | 10 ++++------
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/admin/AdminAddAllUploads.tsx b/src/admin/AdminAddAllUploads.tsx
index f4b3187d..ffe69082 100644
--- a/src/admin/AdminAddAllUploads.tsx
+++ b/src/admin/AdminAddAllUploads.tsx
@@ -73,11 +73,17 @@ export default function AdminAddAllUploads({
           addedUploadUrls.current = updatedUrls;
           return updatedUrls;
         });
-        setAddingProgress((
-          // eslint-disable-next-line max-len
-          (((addedUploadUrls.current.length || 1) - 1) + (data?.progress ?? 0)) /
-          storageUrls.length
-        ) * 0.95);
+        setAddingProgress((current = 0) => {
+          const updatedProgress = (
+            (
+              ((addedUploadUrls.current.length || 1) - 1) +
+              (data?.progress ?? 0)
+            ) /
+            storageUrls.length
+          ) * 0.95;
+          // Prevent out-of-order updates causing progress to go backwards
+          return Math.max(current, updatedProgress);
+        });
       }
     } catch (e: any) {
       setIsAdding(false);
diff --git a/src/components/ImageInput.tsx b/src/components/ImageInput.tsx
index 9f615890..8b046f86 100644
--- a/src/components/ImageInput.tsx
+++ b/src/components/ImageInput.tsx
@@ -44,10 +44,6 @@ export default function ImageInput({
   const [fileUploadIndex, setFileUploadIndex] = useState(0);
   const [fileUploadName, setFileUploadName] = useState('');
 
-  const uploadStatusText = filesLength > 1
-    ? `${fileUploadIndex + 1} of ${filesLength}: ${fileUploadName}`
-    : fileUploadName;
-
   return (
     <div className="space-y-4 min-w-0">
       <div className="flex items-center gap-2 sm:gap-4">
@@ -74,7 +70,9 @@ export default function ImageInput({
             primary
           >
             {loading
-              ? 'Uploading'
+              ? filesLength > 1
+                ? `Uploading ${fileUploadIndex + 1} of ${filesLength}`
+                : 'Uploading'
               : 'Upload Photos'}
           </ProgressButton>
           <input
@@ -225,7 +223,7 @@ export default function ImageInput({
         </label>
         {showUploadStatus && filesLength > 0 &&
           <div className="max-w-full truncate text-ellipsis">
-            {uploadStatusText}
+            {fileUploadName}
           </div>}
       </div>
       <canvas