From f33c9694ad5627b6c9142501db0ffa8c1734cda2 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Sun, 3 Apr 2022 12:53:24 +0200
Subject: [PATCH] if pending status true load spinner

---
 frontend/src/components/GddTransactionList.vue | 7 ++++++-
 frontend/src/components/Menu/Navbar.vue        | 5 ++++-
 frontend/src/components/Status.vue             | 3 ++-
 frontend/src/pages/Overview.vue                | 1 +
 4 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/GddTransactionList.vue b/frontend/src/components/GddTransactionList.vue
index 37605711c..7c9e4dfe8 100644
--- a/frontend/src/components/GddTransactionList.vue
+++ b/frontend/src/components/GddTransactionList.vue
@@ -3,12 +3,14 @@
     <div class="list-group">
       <div v-if="!transactions" class="test-no-transactionlist text-right">
         <b-icon icon="exclamation-triangle" class="mr-2" variant="danger"></b-icon>
+        null nix da
         <small>
           {{ $t('error.no-transactionlist') }}
         </small>
       </div>
       <div v-if="transactionCount < 0" class="test-empty-transactionlist text-right">
         <b-icon icon="exclamation-triangle" class="mr-2" variant="danger"></b-icon>
+        nix da
         <small>{{ $t('error.empty-transactionlist') }}</small>
       </div>
 
@@ -70,7 +72,9 @@
       :total-rows="transactionCount"
     ></pagination-buttons>
     <div v-if="transactionCount <= 0" class="mt-4 text-center">
-      <span>{{ $t('transaction.nullTransactions') }}</span>
+     
+       <b-icon v-if="pending" icon="three-dots" animation="cylon"></b-icon>
+      <div v-else>{{ $t('transaction.nullTransactions') }}</div>
     </div>
   </div>
 </template>
@@ -108,6 +112,7 @@ export default {
     transactionCount: { type: Number, default: 0 },
     transactionLinkCount: { type: Number, default: 0 },
     showPagination: { type: Boolean, default: false },
+    pending: { type: Boolean },
   },
   methods: {
     updateTransactions() {
diff --git a/frontend/src/components/Menu/Navbar.vue b/frontend/src/components/Menu/Navbar.vue
index 3542c1cd1..f998783f7 100644
--- a/frontend/src/components/Menu/Navbar.vue
+++ b/frontend/src/components/Menu/Navbar.vue
@@ -10,7 +10,10 @@
       </div>
 
       <b-navbar-nav class="ml-auto" is-nav>
-        <b-nav-item>{{ pending ? $t('em-dash') : balance | amount }} {{ $t('GDD') }}</b-nav-item>
+        <b-nav-item>
+          <b-icon v-if="pending" icon="three-dots" animation="cylon"></b-icon>
+          <div v-else>{{ pending ? $t('em-dash') : balance | amount }} {{ $t('GDD') }}</div>
+        </b-nav-item>
         <b-nav-item to="/profile" right class="d-none d-sm-none d-md-none d-lg-flex shadow-lg">
           <small>
             {{ $store.state.firstName }} {{ $store.state.lastName }}
diff --git a/frontend/src/components/Status.vue b/frontend/src/components/Status.vue
index 9ebe48e09..59e5152f6 100644
--- a/frontend/src/components/Status.vue
+++ b/frontend/src/components/Status.vue
@@ -1,7 +1,8 @@
 <template>
   <div class="gdd-status">
     <div class="p-0 gdd-status-div">
-      {{ pending || balance === null ? $t('em-dash') : $n(balance, 'decimal') }} {{ statusText }}
+      <b-icon v-if="pending" icon="three-dots" animation="cylon"></b-icon>
+      <div v-else> {{ pending || balance === null ? $t('em-dash') : $n(balance, 'decimal') }} {{ statusText }}</div>
     </div>
   </div>
 </template>
diff --git a/frontend/src/pages/Overview.vue b/frontend/src/pages/Overview.vue
index d42576bf8..9723f6ade 100644
--- a/frontend/src/pages/Overview.vue
+++ b/frontend/src/pages/Overview.vue
@@ -21,6 +21,7 @@
         :decayStartBlock="decayStartBlock"
         :transaction-count="transactionCount"
         :transactionLinkCount="transactionLinkCount"
+        :pending="pending"
         @update-transactions="updateTransactions"
         v-on="$listeners"
       />