Add progress indicator for file uploads

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}