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 { useRequest } from "ahooks";
import { useAuthHeaders } from "../hooks/useAuthHeaders"; 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 { ExportOutlined, LinkOutlined } from "@ant-design/icons";
import { useCallback, useState } from "react"; import { useCallback, useState } from "react";
import { useNavigate } from "react-router"; import { useNavigate } from "react-router";
@ -46,13 +46,21 @@ export const BindKaiqiuAccount = () => {
}); });
}, [modal]); }, [modal]);
const navigate = useNavigate(); const navigate = useNavigate();
if (isBindReq.data?.isBinded === undefined) return null; if (isBindReq.data?.isBinded === undefined) {
return (
<Skeleton.Input active />
);
};
if (isBindReq.data?.isBinded) { if (isBindReq.data?.isBinded) {
return ( return (
<Flex gap={8} onClick={() => navigate(`/profile/${isBindReq.data?.uid}`)}> <Button type="text" onClick={() => navigate(`/profile/${isBindReq.data?.uid}`)}>
<Typography.Text type="secondary">UID: {isBindReq.data?.uid ?? '-'}</Typography.Text> <Typography.Text type="secondary">
<ExportOutlined /> <Space>
</Flex> UID: {isBindReq.data?.uid ?? '-'}
<ExportOutlined />
</Space>
</Typography.Text>
</Button>
); );
} }
return ( return (