From 03aa0ead18633f7c94eec32d6f7b4c33b02bc408 Mon Sep 17 00:00:00 2001
From: kyuuseiryuu <kyuuseiryuu@gmail.com>
Date: Wed, 25 Mar 2026 12:13:44 +0900
Subject: [PATCH] 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.
---
 src/components/BindKaiqiuAccount.tsx | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/BindKaiqiuAccount.tsx b/src/components/BindKaiqiuAccount.tsx
index f47c680..a4d1fd1 100644
--- a/src/components/BindKaiqiuAccount.tsx
+++ b/src/components/BindKaiqiuAccount.tsx
@@ -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>
-        <ExportOutlined />
-      </Flex>
+      <Button type="text" onClick={() => navigate(`/profile/${isBindReq.data?.uid}`)}>
+        <Typography.Text type="secondary">
+          <Space>
+            UID: {isBindReq.data?.uid ?? '-'}
+            <ExportOutlined />
+          </Space>
+        </Typography.Text>
+      </Button>
     );
   }
   return (