Add loading balance state

backend/notification-config-example.json

@@ -1,5 +1,5 @@
 {
-  "email_templates_dir_path": "../internal/mailservice/templates/notifications",
+  "email_templates_dir_path": "./internal/mailservice/templates/notifications",
   "template_types": {
     "deployment": {
       "default": {

frontend/kubecloud/src/components/dashboard/ProfileCard.vue

@@ -19,7 +19,16 @@
         <div class="profile-row">
           <div class="profile-col">
             <label class="profile-label">Balance</label>
-            <v-text-field :model-value="`$${userStore.netBalance.toFixed(2)}${userStore.pendingBalance > 0 ? ` (+$${userStore.pendingBalance.toFixed(2)} pending)` : ''}`" variant="outlined" class="profile-field compact" color="accent" bg-color="transparent" hide-details="auto" disabled density="compact" />
+            <v-text-field
+              :model-value="formattedBalance"
+              variant="outlined"
+              class="profile-field compact"
+              color="accent"
+              bg-color="transparent"
+              hide-details="auto"
+              disabled
+              density="compact"
+            />
           </div>
           <div class="profile-col">
             <label class="profile-label">Verified</label>
@@ -85,13 +94,21 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, watch, computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useUserStore } from '../../stores/user'
 import { authService } from '../../utils/authService'
 
-const { user } = storeToRefs(useUserStore())
 const userStore = useUserStore()
+const { user, netBalance, pendingBalance, isBalanceLoading } = storeToRefs(userStore)
+
+const formattedBalance = computed(() => {
+  if (isBalanceLoading.value) return 'Loading...'
+  const balance = netBalance.value || 0
+  const pending = pendingBalance.value || 0
+  const base = `$${balance.toFixed(2)}`
+  return pending > 0 ? `${base} (+$${pending.toFixed(2)} pending)` : base
+})
 
 // Change password form data
 const passwordFormData = ref({

frontend/kubecloud/src/stores/user.ts

@@ -37,6 +37,7 @@ export const useUserStore = defineStore('user',
     const error = ref<string | null>(null)
     const netBalance = ref(0)
     const pendingBalance = ref(0)
+    const isBalanceLoading = ref(true)
     const balanceInterval = ref<ReturnType<typeof setInterval> | null>(null)
 
     // Computed properties
@@ -84,6 +85,7 @@ export const useUserStore = defineStore('user',
       user.value = null
       token.value = null
       error.value = null
+      isBalanceLoading.value = true
       // Clear localStorage
       authService.clearTokens()
       // Clear notifications and related ephemeral state
@@ -177,9 +179,14 @@ export const useUserStore = defineStore('user',
     }
 
     const updateNetBalance = async () => {
-      const balance = await userService.fetchBalance()
-      netBalance.value = balance.balance
-      pendingBalance.value = balance.pending_balance
+      isBalanceLoading.value = true
+      try {
+        const balance = await userService.fetchBalance()
+        netBalance.value = balance.balance
+        pendingBalance.value = balance.pending_balance
+      } finally {
+        isBalanceLoading.value = false
+      }
     }
 
     return {
@@ -190,6 +197,7 @@ export const useUserStore = defineStore('user',
       error,
       netBalance,
       pendingBalance,
+      isBalanceLoading,
 
       // Computed
       isAdmin,