From eb311ae6ae92ffaeea11a23ddf9849ea1f11362f Mon Sep 17 00:00:00 2001
From: Simula_r <18093452+simula-r@users.noreply.github.com>
Date: Mon, 26 Jan 2026 15:15:35 -0800
Subject: [PATCH 1/2] fix: workspace icon flash and credits showing 0 while
 workspace is initializing

---
 src/components/topbar/CurrentUserButton.vue   | 34 ++++++++++++++-----
 .../topbar/CurrentUserPopoverWorkspace.vue    | 16 ++++++---
 2 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/src/components/topbar/CurrentUserButton.vue b/src/components/topbar/CurrentUserButton.vue
index fde21349864..85d587e91a2 100644
--- a/src/components/topbar/CurrentUserButton.vue
+++ b/src/components/topbar/CurrentUserButton.vue
@@ -12,12 +12,18 @@
         :class="
           cn(
             'flex items-center gap-1 rounded-full hover:bg-interface-button-hover-surface justify-center',
-            compact && 'size-full aspect-square'
+            compact && 'size-full '
           )
         "
       >
+        <Skeleton
+          v-if="showWorkspaceSkeleton"
+          shape="circle"
+          width="32px"
+          height="32px"
+        />
         <WorkspaceProfilePic
-          v-if="showWorkspaceIcon"
+          v-else-if="showWorkspaceIcon"
           :workspace-name="workspaceName"
           :class="compact && 'size-full'"
         />
@@ -40,13 +46,16 @@
         }
       }"
     >
-      <!-- Workspace mode: workspace-aware popover -->
+      <!-- Workspace mode: workspace-aware popover (only when ready) -->
       <CurrentUserPopoverWorkspace
-        v-if="teamWorkspacesEnabled"
+        v-if="teamWorkspacesEnabled && initState === 'ready'"
         @close="closePopover"
       />
       <!-- Legacy mode: original popover -->
-      <CurrentUserPopover v-else @close="closePopover" />
+      <CurrentUserPopover
+        v-else-if="!teamWorkspacesEnabled"
+        @close="closePopover"
+      />
     </Popover>
   </div>
 </template>
@@ -54,6 +63,7 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
 import Popover from 'primevue/popover'
+import Skeleton from 'primevue/skeleton'
 import { computed, defineAsyncComponent, ref } from 'vue'
 
 import UserAvatar from '@/components/common/UserAvatar.vue'
@@ -85,12 +95,20 @@ const photoURL = computed<string | undefined>(
   () => userPhotoUrl.value ?? undefined
 )
 
-const showWorkspaceIcon = computed(() => isCloud && teamWorkspacesEnabled.value)
+const { workspaceName: teamWorkspaceName, initState } = storeToRefs(
+  useTeamWorkspaceStore()
+)
+
+const showWorkspaceSkeleton = computed(
+  () => isCloud && teamWorkspacesEnabled.value && initState.value === 'loading'
+)
+const showWorkspaceIcon = computed(
+  () => isCloud && teamWorkspacesEnabled.value && initState.value === 'ready'
+)
 
 const workspaceName = computed(() => {
   if (!showWorkspaceIcon.value) return ''
-  const { workspaceName } = storeToRefs(useTeamWorkspaceStore())
-  return workspaceName.value
+  return teamWorkspaceName.value
 })
 
 const popover = ref<InstanceType<typeof Popover> | null>(null)
diff --git a/src/components/topbar/CurrentUserPopoverWorkspace.vue b/src/components/topbar/CurrentUserPopoverWorkspace.vue
index 8484b6033d2..7d044d3ac16 100644
--- a/src/components/topbar/CurrentUserPopoverWorkspace.vue
+++ b/src/components/topbar/CurrentUserPopoverWorkspace.vue
@@ -217,6 +217,7 @@ import { useDialogService } from '@/services/dialogService'
 
 const workspaceStore = useTeamWorkspaceStore()
 const {
+  initState,
   workspaceName,
   isInPersonalWorkspace: isPersonalWorkspace,
   isWorkspaceSubscribed
@@ -234,15 +235,20 @@ const { userDisplayName, userEmail, userPhotoUrl, handleSignOut } =
   useCurrentUser()
 const authActions = useFirebaseAuthActions()
 const dialogService = useDialogService()
-const { isActiveSubscription } = useSubscription()
+const { isActiveSubscription, subscriptionStatus } = useSubscription()
 const { totalCredits, isLoadingBalance } = useSubscriptionCredits()
 const subscriptionDialog = useSubscriptionDialog()
 
 const displayedCredits = computed(() => {
-  const isSubscribed = isPersonalWorkspace.value
-    ? isActiveSubscription.value
-    : isWorkspaceSubscribed.value
-  return isSubscribed ? totalCredits.value : '0'
+  if (initState.value !== 'ready') return ''
+  // Only personal workspaces have subscription status from useSubscription()
+  // Team workspaces don't have backend subscription data yet
+  if (isPersonalWorkspace.value) {
+    // Wait for subscription status to load
+    if (subscriptionStatus.value === null) return ''
+    return isActiveSubscription.value ? totalCredits.value : '0'
+  }
+  return '0'
 })
 
 const canUpgrade = computed(() => {

From ab91dda7205773563fbfddac6991c65c860bef28 Mon Sep 17 00:00:00 2001
From: Simula_r <18093452+simula-r@users.noreply.github.com>
Date: Mon, 26 Jan 2026 15:26:03 -0800
Subject: [PATCH 2/2] fix: unit tests

---
 .../topbar/CurrentUserButton.test.ts          | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/components/topbar/CurrentUserButton.test.ts b/src/components/topbar/CurrentUserButton.test.ts
index db5349b49be..c8e568291d5 100644
--- a/src/components/topbar/CurrentUserButton.test.ts
+++ b/src/components/topbar/CurrentUserButton.test.ts
@@ -25,7 +25,24 @@ vi.mock('firebase/auth', () => ({
 }))
 
 // Mock pinia
-vi.mock('pinia')
+vi.mock('pinia', () => ({
+  storeToRefs: vi.fn((store) => store)
+}))
+
+// Mock the useFeatureFlags composable
+vi.mock('@/composables/useFeatureFlags', () => ({
+  useFeatureFlags: vi.fn(() => ({
+    flags: { teamWorkspacesEnabled: false }
+  }))
+}))
+
+// Mock the useTeamWorkspaceStore
+vi.mock('@/platform/workspace/stores/teamWorkspaceStore', () => ({
+  useTeamWorkspaceStore: vi.fn(() => ({
+    workspaceName: { value: '' },
+    initState: { value: 'idle' }
+  }))
+}))
 
 // Mock the useCurrentUser composable
 vi.mock('@/composables/auth/useCurrentUser', () => ({