feat(UserCreate): add loading animation

client/src/components/UserCreate.tsx

@@ -8,12 +8,15 @@ import {
   UploadFile,
   GetProp,
   UploadProps,
+  message,
+  Spin,
 } from 'antd';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useUserSelector } from '@/store/userStore';
 import { UserUpdate } from '@/types/user';
 import { UserService } from '@/services/userService';
+import { LoadingOutlined } from '@ant-design/icons';
 
 const { Option } = Select;
 
@@ -36,6 +39,7 @@ export default function UserCreate({ closeDrawer }: UserCreateProps) {
   const { t } = useTranslation();
   const [previewOpen, setPreviewOpen] = useState(false);
   const [previewImage, setPreviewImage] = useState('');
+  const [loading, setLoading] = useState(false);
 
   const [fileList, setFileList] = useState<UploadFile[]>([]);
 
@@ -52,9 +56,11 @@ export default function UserCreate({ closeDrawer }: UserCreateProps) {
     setFileList(newFileList);
 
   const onFinish = async (values: UserUpdate) => {
-    console.log(values);
+    setLoading(true);
     await UserService.createUser(values);
     closeDrawer();
+    setLoading(false);
+    message.info(t('createdAccountMessage'), 4);
   };
 
   const customUploadButton = (
@@ -231,12 +237,21 @@ export default function UserCreate({ closeDrawer }: UserCreateProps) {
             block
             style={{ color: '#000' }}
           >
-            <img
+            {loading ? (
-              src="/icons/drawer/reg.svg"
+              <>
-              alt="save"
+                <Spin indicator={<LoadingOutlined spin />} size="small"></Spin>{' '}
-              style={{ height: '18px', width: '18px' }}
+                {t('saving')}
-            />{' '}
+              </>
-            {t('addAccount')}
+            ) : (
+              <>
+                <img
+                  src="/icons/drawer/reg.svg"
+                  alt="save"
+                  style={{ height: '18px', width: '18px' }}
+                />{' '}
+                {t('addAccount')}
+              </>
+            )}
           </Button>
         </Form.Item>
       </Form>

client/src/config/i18n.ts

@@ -47,6 +47,8 @@ i18n
           VIEWER: 'Viewer',
           nameLogin: 'Name, login',
           createdAt: 'Created',
+          saving: 'Saving...',
+          createdAccountMessage: 'User successfully created!',
         },
       },
       ru: {
@@ -86,6 +88,8 @@ i18n
           VIEWER: 'Наблюдатель',
           nameLogin: 'Имя, Логин',
           createdAt: 'Создано',
+          saving: 'Сохранение...',
+          createdAccountMessage: 'Пользователь успешно создан!'
         },
       },
     },