From d52ab6c5f49b36e62c65e361907076fffe35865c Mon Sep 17 00:00:00 2001
From: SaladDay <saladday@foxmail.com>
Date: Wed, 1 Jul 2026 17:33:35 +0000
Subject: [PATCH] refactor(codex-oauth): stable async loading placeholder for
 account usage
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The account header (login + badges + actions) already renders independently
of the usage query — the quota is fetched async via Tauri invoke + React
Query, so the account never waits on it. Make that visually obvious and
jump-free: while the usage loads, show a spinner inside a placeholder shaped
like the final quota card (same rounded-xl / border / bg-card), so the card
morphs smoothly into the data instead of popping in from an empty gap.
---
 src/components/CodexOauthAccountQuota.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/CodexOauthAccountQuota.tsx b/src/components/CodexOauthAccountQuota.tsx
index c2c3db1df..7a42a2a90 100644
--- a/src/components/CodexOauthAccountQuota.tsx
+++ b/src/components/CodexOauthAccountQuota.tsx
@@ -29,12 +29,14 @@ const CodexOauthAccountQuota: React.FC<CodexOauthAccountQuotaProps> = ({
     autoQuery: false,
   });
 
-  // 首次加载占位：SubscriptionQuotaView 在 quota 未就绪时返回 null，
-  // 这里给一个语言无关的 spinner，避免开面板后出现空白跳变。
+  // 首次加载占位：账号头部由父组件独立渲染，这里只负责用量区。
+  // 用量请求是异步的（Tauri invoke + React Query），加载期间给一个
+  // 与最终额度卡片同形状（rounded-xl / border / bg-card）的转圈占位，
+  // 这样账号会立刻显示、用量数据到达后原地平滑替换，不产生跳版。
   if (loading && !quota) {
     return (
-      <div className="mt-3 flex items-center justify-center py-2 text-muted-foreground">
-        <Loader2 className="h-4 w-4 animate-spin" />
+      <div className="mt-3 flex items-center justify-center rounded-xl border border-border-default bg-card py-5 shadow-sm">
+        <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
       </div>
     );
   }