From aa7390df83814b457bb8b3743e75e43f31b95202 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Tue, 2 Jul 2024 23:08:26 -0500
Subject: [PATCH] Add progress indicator for file uploads

---
 src/components/ImageInput.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/ImageInput.tsx b/src/components/ImageInput.tsx
index 902206f1..9f615890 100644
--- a/src/components/ImageInput.tsx
+++ b/src/components/ImageInput.tsx
@@ -8,7 +8,7 @@ import { clsx } from 'clsx/lite';
 import { ACCEPTED_PHOTO_FILE_TYPES } from '@/photo';
 import { FiUploadCloud } from 'react-icons/fi';
 import { MAX_IMAGE_SIZE } from '@/services/next-image';
-import LoaderButton from './primitives/LoaderButton';
+import ProgressButton from './primitives/ProgressButton';
 
 const INPUT_ID = 'file';
 
@@ -58,9 +58,12 @@ export default function ImageInput({
             loading && 'pointer-events-none cursor-not-allowed',
           )}
         >
-          <LoaderButton
+          <ProgressButton
             type="button"
             isLoading={loading}
+            progress={filesLength > 1
+              ? (fileUploadIndex + 1) / filesLength * 0.95
+              : undefined}
             icon={<FiUploadCloud
               size={18}
               className="translate-x-[-0.5px] translate-y-[0.5px]"
@@ -73,7 +76,7 @@ export default function ImageInput({
             {loading
               ? 'Uploading'
               : 'Upload Photos'}
-          </LoaderButton>
+          </ProgressButton>
           <input
             ref={inputRef}
             id={INPUT_ID}