src/components/Inputs/ImageUpload.module.scss

@@ -0,0 +1,11 @@
+.spinner {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  -webkit-backdrop-filter: blur(1px);
+  backdrop-filter: blur(1px);
+  pointer-events: none;
+}

src/components/Inputs/ImageUpload.tsx

@@ -8,6 +8,8 @@ import {
 } from '../../controllers'
 import { errorFeedback } from '../../types'
 import { MediaInputPopover } from './MediaInputPopover'
+import { Spinner } from 'components/Spinner'
+import styles from './ImageUpload.module.scss'
 
 export interface ImageUploadProps {
   multiple?: boolean | undefined
@@ -15,6 +17,7 @@ export interface ImageUploadProps {
 }
 export const ImageUpload = React.memo(
   ({ multiple = false, onChange }: ImageUploadProps) => {
+    const [isLoading, setIsLoading] = useState(false)
     const [mediaOption, setMediaOption] = useState<MediaOption>(
       MEDIA_OPTIONS[0]
     )
@@ -28,6 +31,7 @@ export const ImageUpload = React.memo(
       async (acceptedFiles: File[]) => {
         if (acceptedFiles.length) {
           try {
+            setIsLoading(true)
             const imageController = new ImageController(mediaOption)
             const urls: string[] = []
             for (let i = 0; i < acceptedFiles.length; i++) {
@@ -37,6 +41,8 @@ export const ImageUpload = React.memo(
             onChange(urls)
           } catch (error) {
             errorFeedback(error)
+          } finally {
+            setIsLoading(false)
           }
         }
       },
@@ -79,7 +85,6 @@ export const ImageUpload = React.memo(
         />
         <div className='uploadBoxMainInside' {...getRootProps()} tabIndex={-1}>
           <input id='featuredImageUrl-upload' {...getInputProps()} />
-
           <span>{dropzoneLabel}</span>
           <div
             className='FiltersMainElement'
@@ -109,6 +114,11 @@ export const ImageUpload = React.memo(
               </div>
             </div>
           </div>
+          {isLoading && (
+            <div className={styles.spinner}>
+              <Spinner />
+            </div>
+          )}
         </div>
       </div>
     )