From 33b856505162aa506fc760372bde4a68f7bc77cf Mon Sep 17 00:00:00 2001
From: enes <enes@nostrdev.com>
Date: Tue, 7 Jan 2025 21:01:11 +0100
Subject: [PATCH] feat(image): add spinner while uploading

---
 src/components/Inputs/ImageUpload.module.scss | 11 +++++++++++
 src/components/Inputs/ImageUpload.tsx         | 12 +++++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Inputs/ImageUpload.module.scss

diff --git a/src/components/Inputs/ImageUpload.module.scss b/src/components/Inputs/ImageUpload.module.scss
new file mode 100644
index 0000000..5ac66bc
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/Inputs/ImageUpload.tsx b/src/components/Inputs/ImageUpload.tsx
index eba3e49..1d11d5d 100644
--- a/src/components/Inputs/ImageUpload.tsx
+++ b/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>
     )