client: add loading

packages/client/src/data/user.tsx

@@ -18,7 +18,7 @@ export const useUser = () => {
 
   const login = useCallback(
     (data) => {
-      HttpClient.post<IUser>('/user/login', data).then((res) => {
+      return HttpClient.post<IUser>('/user/login', data).then((res) => {
         const user = res as unknown as ILoginUser;
         mutate(user);
         setStorage('user', JSON.stringify(user));

packages/client/src/pages/login/index.tsx

@@ -3,8 +3,9 @@ import { Author } from 'components/author';
 import { LogoImage, LogoText } from 'components/logo';
 import { Seo } from 'components/seo';
 import { useUser } from 'data/user';
+import { useToggle } from 'hooks/use-toggle';
 import Link from 'next/link';
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import styles from './index.module.scss';
 
@@ -13,6 +14,21 @@ const { Title, Text } = Typography;
 
 const Page = () => {
   const { login } = useUser();
+  const [loading, toggleLoading] = useToggle(false);
+
+  const toLogin = useCallback(
+    (data) => {
+      toggleLoading(true);
+      login(data)
+        .then(() => {
+          toggleLoading(false);
+        })
+        .catch(() => {
+          toggleLoading(false);
+        });
+    },
+    [login, toggleLoading]
+  );
 
   return (
     <Layout className={styles.wrap}>
@@ -24,7 +40,7 @@ const Page = () => {
             <LogoText></LogoText>
           </Space>
         </Title>
-        <Form className={styles.form} initValues={{ name: '', password: '' }} onSubmit={login}>
+        <Form className={styles.form} initValues={{ name: '', password: '' }} onSubmit={toLogin}>
           <Title type="tertiary" heading={5} style={{ marginBottom: 16, textAlign: 'center' }}>
             账户登录
           </Title>
@@ -45,7 +61,7 @@ const Page = () => {
             placeholder="输入用户密码"
             rules={[{ required: true, message: '请输入密码' }]}
           ></Form.Input>
-          <Button htmlType="submit" type="primary" theme="solid" block style={{ margin: '16px 0' }}>
+          <Button htmlType="submit" type="primary" theme="solid" block loading={loading} style={{ margin: '16px 0' }}>
             登录
           </Button>
           <footer>

packages/client/src/pages/register/index.tsx

@@ -70,7 +70,7 @@ const Page = () => {
             placeholder="确认用户密码"
             rules={[{ required: true, message: '请再次输入密码' }]}
           ></Form.Input>
-          <Button htmlType="submit" type="primary" theme="solid" block style={{ margin: '16px 0' }}>
+          <Button htmlType="submit" type="primary" theme="solid" block loading={loading} style={{ margin: '16px 0' }}>
             注册
           </Button>
           <footer>