fix: avoid zero balance while rewards sync

Author: anthhub

apps/web/src/hooks/use-desktop-rewards.ts

@@ -105,6 +105,8 @@ export function useDesktopRewardsStatus() {
   return {
     status: rewardsQuery.data ?? createFallbackRewardsStatus(),
     loading: rewardsQuery.isLoading,
+    resolved: rewardsQuery.isFetched,
+    refreshing: rewardsQuery.isFetching && !rewardsQuery.isLoading,
     refresh: rewardsQuery.refetch,
     claimTask: claimMutation.mutateAsync,
     prepareGithubStarSession: githubStarSessionMutation.mutateAsync,

apps/web/src/layouts/workspace-layout.tsx

@@ -352,7 +352,11 @@ function WorkspaceLayoutInner() {
   const [showLogoutConfirm, setShowLogoutConfirm] = useState(false);
   const [showHelpMenu, setShowHelpMenu] = useState(false);
   const [showLangMenu, setShowLangMenu] = useState(false);
-  const { status: rewardsStatus } = useDesktopRewardsStatus();
+  const {
+    status: rewardsStatus,
+    loading: rewardsStatusLoading,
+    resolved: rewardsStatusResolved,
+  } = useDesktopRewardsStatus();
   const update = useAutoUpdate();
   const [updateDismissed, setUpdateDismissed] = useState(false);
   const hasUpdate =
@@ -542,10 +546,16 @@ function WorkspaceLayoutInner() {
   const userImage = me?.image ?? session?.user?.image ?? null;
   const userInitial = (userName[0] ?? userEmail[0] ?? "U").toUpperCase();
   const rewardTaskCountLabel = `${rewardsStatus.progress.claimedCount}/${rewardsStatus.progress.totalCount}`;
+  const rewardsBalancePending =
+    cloudConnected &&
+    !rewardsStatus.cloudBalance &&
+    (rewardsStatusLoading || !rewardsStatusResolved);
   const rewardBalanceValue = rewardsStatus.cloudBalance
     ? `${rewardsStatus.cloudBalance.totalBalance} ${t("layout.sidebar.balanceUnit")}`
     : cloudConnected
-      ? `0 ${t("layout.sidebar.balanceUnit")}`
+      ? rewardsBalancePending
+        ? t("layout.sidebar.balancePlaceholder")
+        : `0 ${t("layout.sidebar.balanceUnit")}`
       : t("layout.sidebar.balancePlaceholder");
   const shouldShowRewardsBanner =
     cloudConnected &&

apps/web/tests/workspace-layout.test.tsx

@@ -206,6 +206,19 @@ describe("WorkspaceLayout", () => {
     expect(markup).toContain("Design sync thread");
   });
 
+  it("shows a syncing placeholder instead of zero balance while rewards are still loading", () => {
+    const markup = renderWorkspaceLayout(
+      "/workspace/sessions/sess-1",
+      undefined,
+      {
+        connected: true,
+      },
+    );
+
+    expect(markup).toContain("layout.sidebar.balancePlaceholder");
+    expect(markup).not.toContain("0 layout.sidebar.balanceUnit");
+  });
+
   it("keeps the rewards page route without rendering a main navigation tab", () => {
     const markup = renderWorkspaceLayout(
       "/workspace/rewards",
@@ -285,7 +298,8 @@ describe("WorkspaceLayout", () => {
     expect(markup).not.toContain('data-rewards-card-loading="true"');
     expect(markup).toContain('data-sidebar-growth-card="rewards"');
     expect(markup).toContain("layout.sidebar.rewardsTitle");
-    expect(markup).toContain("0 layout.sidebar.balanceUnit");
+    expect(markup).toContain("layout.sidebar.balancePlaceholder");
+    expect(markup).not.toContain("0 layout.sidebar.balanceUnit");
   });
 
   it("renders a global warning banner on non-remediation pages", () => {