feat(components/BindKaiqiuAccount): improve loading state and UI for bound account
- Replace null return with Skeleton.Input when binding status is undefined - Wrap bound account display in a Button with Space layout - Import Skeleton and Space components from antd This enhances the user experience by providing a loading skeleton and making the bound account view more interactive.
This commit is contained in:
parent
67457b0f8b
commit
03aa0ead18
@ -1,6 +1,6 @@
|
||||
import { useRequest } from "ahooks";
|
||||
import { useAuthHeaders } from "../hooks/useAuthHeaders";
|
||||
import { Alert, App, Button, Drawer, Flex, Form, Input, Spin, Typography } from "antd";
|
||||
import { Alert, App, Button, Drawer, Flex, Form, Input, Skeleton, Space, Spin, Typography } from "antd";
|
||||
import { ExportOutlined, LinkOutlined } from "@ant-design/icons";
|
||||
import { useCallback, useState } from "react";
|
||||
import { useNavigate } from "react-router";
|
||||
@ -46,13 +46,21 @@ export const BindKaiqiuAccount = () => {
|
||||
});
|
||||
}, [modal]);
|
||||
const navigate = useNavigate();
|
||||
if (isBindReq.data?.isBinded === undefined) return null;
|
||||
if (isBindReq.data?.isBinded === undefined) {
|
||||
return (
|
||||
<Skeleton.Input active />
|
||||
);
|
||||
};
|
||||
if (isBindReq.data?.isBinded) {
|
||||
return (
|
||||
<Flex gap={8} onClick={() => navigate(`/profile/${isBindReq.data?.uid}`)}>
|
||||
<Typography.Text type="secondary">UID: {isBindReq.data?.uid ?? '-'}</Typography.Text>
|
||||
<Button type="text" onClick={() => navigate(`/profile/${isBindReq.data?.uid}`)}>
|
||||
<Typography.Text type="secondary">
|
||||
<Space>
|
||||
UID: {isBindReq.data?.uid ?? '-'}
|
||||
<ExportOutlined />
|
||||
</Flex>
|
||||
</Space>
|
||||
</Typography.Text>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
return (
|
||||
|
||||
Loading…
Reference in New Issue
Block a user