From 7b1bcee94473c97a43a677b64121ae6a792a23d0 Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Sat, 6 Aug 2022 22:18:46 +0100
Subject: [PATCH] fix: uploading avatar loading status

---
 src/components/dashboard/AvatarForm.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/dashboard/AvatarForm.tsx b/src/components/dashboard/AvatarForm.tsx
index 86cf04a5..4b474228 100644
--- a/src/components/dashboard/AvatarForm.tsx
+++ b/src/components/dashboard/AvatarForm.tsx
@@ -18,9 +18,11 @@ const AvatarEditorModal: React.FC<{
 }> = ({ isOpen, setIsOpen, image, site, uploadFile }) => {
   const editorRef = useRef<ReactAvatarEditor | null>(null)
   const updateSite = useUpdateSite()
+  const [uploadFileProgress, setUploadFileProgress] = useState(false)
 
   const useCropAndSave = async () => {
     let key
+    setUploadFileProgress(true)
     // Get cropped image
     if (editorRef.current) {
       const fromCanvas = editorRef.current?.getImage()
@@ -37,6 +39,7 @@ const AvatarEditorModal: React.FC<{
 
     // Save the image to profile / site
     updateSite.mutate({ site, icon: key })
+    setUploadFileProgress(false)
   }
 
   useEffect(() => {
@@ -77,7 +80,7 @@ const AvatarEditorModal: React.FC<{
             <Button
               isBlock
               onClick={useCropAndSave}
-              isLoading={updateSite.isLoading}
+              isLoading={uploadFileProgress || updateSite.isLoading}
             >
               Crop and Save
             </Button>