feat: button add loading

packages/app/src/components/file-upload/index.tsx

@@ -3,7 +3,7 @@ import { FC, useRef, ChangeEvent, ReactElement } from 'react';
 import { styled } from '@/styles';
 interface Props {
   uploadType?: string;
-  view?: ReactElement;
+  children?: ReactElement;
   accept?: string;
   fileChange: (file: File) => void;
 }
@@ -28,7 +28,7 @@ export const Upload: FC<Props> = props => {
   };
   return (
     <UploadStyle onClick={_chooseFile}>
-      {props.view ?? <Button>Upload</Button>}
+      {props.children ?? <Button>Upload</Button>}
       <input
         ref={input_ref}
         type="file"

packages/app/src/components/workspace-setting/general/general.tsx

@@ -39,6 +39,7 @@ export const GeneralPage = ({
   } = useAppState();
   const [showDelete, setShowDelete] = useState<boolean>(false);
   const [showLeave, setShowLeave] = useState<boolean>(false);
+  const [uploading, setUploading] = useState<boolean>(false);
   const [workspaceName, setWorkspaceName] = useState<string>(
     workspaces[workspace.id]?.meta.name ||
       (workspace.type === WorkspaceType.Private && user ? user.name : '')
@@ -75,11 +76,17 @@ export const GeneralPage = ({
   };
 
   const fileChange = async (file: File) => {
+    setUploading(true);
     const blob = new Blob([file], { type: file.type });
-    const blobId = await uploadBlob({ blob });
-    currentWorkspace?.meta.setAvatar(blobId);
-    workspaces[workspace.id]?.meta.setAvatar(blobId);
-    debouncedRefreshWorkspacesMeta();
+    const blobId = await uploadBlob({ blob }).finally(() => {
+      setUploading(false);
+    });
+    if (blobId) {
+      currentWorkspace?.meta.setAvatar(blobId);
+      workspaces[workspace.id]?.meta.setAvatar(blobId);
+      setUploading(false);
+      debouncedRefreshWorkspacesMeta();
+    }
   };
 
   return workspace ? (
@@ -99,7 +106,9 @@ export const GeneralPage = ({
         <Upload
           accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
           fileChange={fileChange}
-        ></Upload>
+        >
+          <Button loading={uploading}>Upload</Button>
+        </Upload>
         {/* TODO: add upload logic */}
         {/* {isOwner ? (
           <StyledAvatarUploadBtn shape="round">upload</StyledAvatarUploadBtn>

packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/CreateWorkspaceItem/workspace-create/workspace-create.tsx

@@ -29,7 +29,7 @@ const DefaultHeadImgColors = [
 
 export const WorkspaceCreate = ({ open, onClose }: WorkspaceCreateProps) => {
   const [workspaceName, setWorkspaceId] = useState<string>('');
-  const [canCreate, setCanCreate] = useState<boolean>(false);
+  const [creating, setCreating] = useState<boolean>(false);
   const { refreshWorkspacesMeta } = useAppState();
   const handlerInputChange = (workspaceName: string) => {
     setWorkspaceId(workspaceName);
@@ -64,22 +64,26 @@ export const WorkspaceCreate = ({ open, onClose }: WorkspaceCreateProps) => {
     });
   };
   const handleCreateWorkspace = async () => {
-    setCanCreate(true);
-    const blobId = await createDefaultHeadImg(workspaceName);
-    createWorkspace({ name: workspaceName, avatar: blobId })
-      .then(async data => {
-        await refreshWorkspacesMeta();
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        router.push(`/workspace/${data.id}`);
-        onClose();
-      })
-      .catch(err => {
-        console.log(err, 'err');
-      })
-      .finally(() => {
-        setCanCreate(false);
-      });
+    setCreating(true);
+    const blobId = await createDefaultHeadImg(workspaceName).catch(() => {
+      setCreating(false);
+    });
+    if (blobId) {
+      createWorkspace({ name: workspaceName, avatar: blobId })
+        .then(async data => {
+          await refreshWorkspacesMeta();
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          router.push(`/workspace/${data.id}`);
+          onClose();
+        })
+        .catch(err => {
+          console.log(err, 'err');
+        })
+        .finally(() => {
+          setCreating(false);
+        });
+    }
   };
   return (
     <Modal open={open} onClose={onClose}>
@@ -99,8 +103,9 @@ export const WorkspaceCreate = ({ open, onClose }: WorkspaceCreateProps) => {
         </StyledInputContent>
         <StyledButtonContent>
           <StyledButton
-            disabled={!workspaceName.length || canCreate}
+            disabled={!workspaceName.length || creating}
             onClick={handleCreateWorkspace}
+            loading={creating}
           >
             Create
           </StyledButton>