From 3d80718fddb392811a6a40f84c8bfd3eae7009c1 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Mon, 9 Mar 2020 23:32:28 +0100
Subject: [PATCH] Add loading spinner

---
 .../src/Actions/Account/index.tsx             | 25 +++++++++++--------
 packages/react-components/src/Spinner.tsx     |  6 +++++
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/packages/page-staking/src/Actions/Account/index.tsx b/packages/page-staking/src/Actions/Account/index.tsx
index 67dc799b40..5fcf42ef02 100644
--- a/packages/page-staking/src/Actions/Account/index.tsx
+++ b/packages/page-staking/src/Actions/Account/index.tsx
@@ -10,7 +10,7 @@ import { Codec, ITuple } from '@polkadot/types/types';
 import BN from 'bn.js';
 import React, { useContext, useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { AddressInfo, AddressMini, AddressSmall, Badge, Button, Menu, Popup, StatusContext, TxButton } from '@polkadot/react-components';
+import { AddressInfo, AddressMini, AddressSmall, Badge, Button, Menu, Popup, Spinner, StatusContext, TxButton } from '@polkadot/react-components';
 import { useAccounts, useApi, useCall, useToggle } from '@polkadot/react-hooks';
 import { u8aConcat, u8aToHex } from '@polkadot/util';
 
@@ -170,17 +170,20 @@ function Account ({ allStashes, className, isOwnStash, isVisible, next, onUpdate
   return (
     <tr className={className}>
       <td>
-        {payoutEras.length !== 0 && (
-          <Badge
-            hover={t('payouts for {{count}} eras pending', { replace: { count: payoutEras.length } })}
-            info={payoutEras.length}
-            isInline
-            isTooltip
-            type='counter'
-          />
-        )}
+        {!stakingRewardsAll
+          ? <Spinner variant='mini' />
+          : (payoutEras.length !== 0 && (
+            <Badge
+              hover={t('payouts for {{count}} eras pending', { replace: { count: payoutEras.length } })}
+              info={payoutEras.length}
+              isInline
+              isTooltip
+              type='counter'
+            />
+          ))
+        }
       </td>
-      <td className='top'>
+      <td>
         <BondExtra
           controllerId={controllerId}
           isOpen={isBondExtraOpen}
diff --git a/packages/react-components/src/Spinner.tsx b/packages/react-components/src/Spinner.tsx
index fc3ef485ce..a1a01fc6ab 100644
--- a/packages/react-components/src/Spinner.tsx
+++ b/packages/react-components/src/Spinner.tsx
@@ -77,6 +77,12 @@ export default styled(Spinner)`
     }
   }
 
+  &.mini {
+    .loader {
+      width: 22px;
+    }
+  }
+
   &.push {
     .loader {
       width: 40px;