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 1/6] 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"
       />

From a5546826a54496cb4b12cedae83458734f30e739 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Sun, 3 Apr 2022 12:55:18 +0200
Subject: [PATCH 2/6] delete unused text

---
 frontend/src/components/GddTransactionList.vue | 2 --
 frontend/src/components/Status.vue             | 4 +++-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/GddTransactionList.vue b/frontend/src/components/GddTransactionList.vue
index 7c9e4dfe8..72ecb76c6 100644
--- a/frontend/src/components/GddTransactionList.vue
+++ b/frontend/src/components/GddTransactionList.vue
@@ -3,14 +3,12 @@
     <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>
 
diff --git a/frontend/src/components/Status.vue b/frontend/src/components/Status.vue
index 59e5152f6..60b29834f 100644
--- a/frontend/src/components/Status.vue
+++ b/frontend/src/components/Status.vue
@@ -2,7 +2,9 @@
   <div class="gdd-status">
     <div class="p-0 gdd-status-div">
       <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 v-else>
+        {{ pending || balance === null ? $t('em-dash') : $n(balance, 'decimal') }} {{ statusText }}
+      </div>
     </div>
   </div>
 </template>

From f1555b4a2743e297da90493bc60605f1a59a3714 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Sun, 3 Apr 2022 12:55:52 +0200
Subject: [PATCH 3/6] fixed yarn lint

---
 frontend/src/components/GddTransactionList.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/src/components/GddTransactionList.vue b/frontend/src/components/GddTransactionList.vue
index 72ecb76c6..55a11063c 100644
--- a/frontend/src/components/GddTransactionList.vue
+++ b/frontend/src/components/GddTransactionList.vue
@@ -70,8 +70,7 @@
       :total-rows="transactionCount"
     ></pagination-buttons>
     <div v-if="transactionCount <= 0" class="mt-4 text-center">
-     
-       <b-icon v-if="pending" icon="three-dots" animation="cylon"></b-icon>
+      <b-icon v-if="pending" icon="three-dots" animation="cylon"></b-icon>
       <div v-else>{{ $t('transaction.nullTransactions') }}</div>
     </div>
   </div>

From 2f6ed90f1549ca8787753ea33acef42f2470d79c Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Sun, 3 Apr 2022 13:02:53 +0200
Subject: [PATCH 4/6] fixed test for pending animation icon

---
 frontend/src/components/Status.spec.js | 7 +++++--
 frontend/src/components/Status.vue     | 2 +-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Status.spec.js b/frontend/src/components/Status.spec.js
index ba7b03fa4..ca62d3bd3 100644
--- a/frontend/src/components/Status.spec.js
+++ b/frontend/src/components/Status.spec.js
@@ -26,8 +26,8 @@ describe('Status', () => {
     })
 
     describe('balance is pending', () => {
-      it('it displays an en-dash', () => {
-        expect(wrapper.find('div.gdd-status-div').text()).toEqual('em-dash GDD')
+      it('it displays an animation icon test-pending-icon', () => {
+        expect(wrapper.find('.test-pending-icon').exists()).toBe(true)
       })
     })
 
@@ -37,6 +37,9 @@ describe('Status', () => {
           pending: false,
         })
       })
+      it('it no displays an animation icon test-pending-icon', () => {
+        expect(wrapper.find('.test-pending-icon').exists()).toBe(false)
+      })
 
       it('it displays the ammount of GDD', () => {
         expect(wrapper.find('div.gdd-status-div').text()).toEqual('1234 GDD')
diff --git a/frontend/src/components/Status.vue b/frontend/src/components/Status.vue
index 60b29834f..14d470fb3 100644
--- a/frontend/src/components/Status.vue
+++ b/frontend/src/components/Status.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="gdd-status">
     <div class="p-0 gdd-status-div">
-      <b-icon v-if="pending" icon="three-dots" animation="cylon"></b-icon>
+      <b-icon v-if="pending" icon="three-dots" animation="cylon" class="test-pending-icon"></b-icon>
       <div v-else>
         {{ pending || balance === null ? $t('em-dash') : $n(balance, 'decimal') }} {{ statusText }}
       </div>

From 5b1f8d1164c3983d954b343649ce3840cfd03947 Mon Sep 17 00:00:00 2001
From: Alexander Friedland <ogerly@users.noreply.github.com>
Date: Mon, 4 Apr 2022 13:16:00 +0200
Subject: [PATCH 5/6] Update frontend/src/components/Status.spec.js

Co-authored-by: Moriz Wahl <moriz.wahl@gmx.de>
---
 frontend/src/components/Status.spec.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Status.spec.js b/frontend/src/components/Status.spec.js
index ca62d3bd3..55e9fd263 100644
--- a/frontend/src/components/Status.spec.js
+++ b/frontend/src/components/Status.spec.js
@@ -37,7 +37,8 @@ describe('Status', () => {
           pending: false,
         })
       })
-      it('it no displays an animation icon test-pending-icon', () => {
+
+      it('does not display an animation icon test-pending-icon', () => {
         expect(wrapper.find('.test-pending-icon').exists()).toBe(false)
       })
 

From 16aa988558b4d6196b4bbeb2f81e664fc444b82e Mon Sep 17 00:00:00 2001
From: Alexander Friedland <ogerly@users.noreply.github.com>
Date: Mon, 4 Apr 2022 13:16:09 +0200
Subject: [PATCH 6/6] Update frontend/src/components/Status.spec.js

Co-authored-by: Moriz Wahl <moriz.wahl@gmx.de>
---
 frontend/src/components/Status.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/Status.spec.js b/frontend/src/components/Status.spec.js
index 55e9fd263..64a15deb1 100644
--- a/frontend/src/components/Status.spec.js
+++ b/frontend/src/components/Status.spec.js
@@ -26,7 +26,7 @@ describe('Status', () => {
     })
 
     describe('balance is pending', () => {
-      it('it displays an animation icon test-pending-icon', () => {
+      it('displays an animation icon test-pending-icon', () => {
         expect(wrapper.find('.test-pending-icon').exists()).toBe(true)
       })
     })