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:
kyuuseiryuu 2026-03-25 12:13:44 +09:00
parent 67457b0f8b
commit 03aa0ead18

View File

@ -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 (