em-dash is shown while balance is loaded

frontend/src/components/SidebarPlugin/SideBar.vue

@@ -10,7 +10,7 @@
         <img :src="logo" class="navbar-brand-img" alt="..." />
       </div>
       <b-row class="text-center">
-        <b-col>{{ $n(balance) }} GDD</b-col>
+        <b-col>{{ pending ? '—' : $n(balance) }} GDD</b-col>
       </b-row>
       <slot name="mobile-right">
         <ul class="nav align-items-center d-md-none">
@@ -93,6 +93,10 @@ export default {
       type: Number,
       default: 0,
     },
+    pending: {
+      type: Boolean,
+      default: true,
+    },
   },
   provide() {
     return {

frontend/src/views/Layout/DashboardLayout_gdd.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="wrapper">
     <notifications></notifications>
-    <side-bar @logout="logout" :balance="balance">
+    <side-bar @logout="logout" :balance="balance" :pending="pending">
       <template slot="links">
         <b-nav-item href="#!" to="/overview">
           <b-nav-text class="p-0 text-lg text-muted">{{ $t('send') }}</b-nav-text>
@@ -10,15 +10,15 @@
           <b-nav-text class="p-0 text-lg text-muted">{{ $t('transactions') }}</b-nav-text>
         </b-nav-item>
         <!--
-        <b-nav-item href="#!" to="/profile">
-          <b-nav-text class="p-0 text-lg text-muted">{{ $t('site.navbar.my-profil') }}</b-nav-text>
-        </b-nav-item>       
-        <b-nav-item href="#!" to="/profileedit">
-          <b-nav-text class="p-0 text-lg text-muted">{{ $t('site.navbar.settings') }}</b-nav-text>
-        </b-nav-item>
-        <b-nav-item href="#!" to="/activity">
-          <b-nav-text class="p-0 text-lg text-muted">{{ $t('site.navbar.activity') }}</b-nav-text>
-        </b-nav-item>
+             <b-nav-item href="#!" to="/profile">
+             <b-nav-text class="p-0 text-lg text-muted">{{ $t('site.navbar.my-profil') }}</b-nav-text>
+             </b-nav-item>       
+             <b-nav-item href="#!" to="/profileedit">
+             <b-nav-text class="p-0 text-lg text-muted">{{ $t('site.navbar.settings') }}</b-nav-text>
+             </b-nav-item>
+             <b-nav-item href="#!" to="/activity">
+             <b-nav-text class="p-0 text-lg text-muted">{{ $t('site.navbar.activity') }}</b-nav-text>
+             </b-nav-item>
         -->
       </template>
     </side-bar>
@@ -33,6 +33,7 @@
             :gdt-balance="GdtBalance"
             :transactions="transactions"
             :transactionCount="transactionCount"
+            :pending="pending"
             @update-balance="updateBalance"
             @update-transactions="updateTransactions"
           ></router-view>
@@ -83,6 +84,7 @@ export default {
       transactions: [],
       bookedBalance: 0,
       transactionCount: 0,
+      pending: true,
     }
   },
   methods: {
@@ -99,6 +101,7 @@ export default {
       this.$router.push('/login')
     },
     async updateTransactions() {
+      this.pending = true
       const result = await communityAPI.transactions(this.$store.state.sessionId)
       if (result.success) {
         this.GdtBalance = Number(result.result.data.gdtSum)
@@ -106,7 +109,9 @@ export default {
         this.balance = Number(result.result.data.decay)
         this.bookedBalance = Number(result.result.data.balance)
         this.transactionCount = result.result.data.count
+        this.pending = false
       } else {
+        this.pending = false
         // what to do when loading balance fails?
       }
     },

frontend/src/views/Pages/AccountOverview.vue

@@ -2,7 +2,12 @@
   <div>
     <base-header class="pb-4 pt-2 bg-transparent"></base-header>
     <b-container fluid class="p-2 mt-5">
-      <gdd-status v-if="showTransactionList" :balance="balance" :gdt-balance="GdtBalance" />
+      <gdd-status
+        v-if="showTransactionList"
+        :pending="pending"
+        :balance="balance"
+        :gdt-balance="GdtBalance"
+      />
       <br />
       <gdd-send
         :balance="balance"
@@ -50,6 +55,10 @@ export default {
       default: () => [],
     },
     transactionCount: { type: Number, default: 0 },
+    pending: {
+      type: Boolean,
+      default: true,
+    },
   },
   methods: {
     toggleShowList(bool) {

frontend/src/views/Pages/AccountOverview/GddStatus.vue

@@ -8,7 +8,7 @@
           class="mb-4 h1"
           style="background-color: #ebebeba3 !important"
         >
-          {{ $n(balance) }} GDD
+          {{ pending ? '—' : $n(balance) }} GDD
         </stats-card>
       </b-col>
       <b-col>
@@ -18,7 +18,7 @@
           class="mb-4 h1"
           style="background-color: #ebebeba3 !important"
         >
-          {{ $n(GdtBalance) }} GDT
+          {{ pending ? '—' : $n(GdtBalance) }} GDT
         </stats-card>
       </b-col>
     </b-row>
@@ -31,6 +31,10 @@ export default {
   props: {
     balance: { type: Number, default: 0 },
     GdtBalance: { type: Number, default: 0 },
+    pending: {
+      type: Boolean,
+      default: true,
+    },
   },
 }
 </script>