Add loading spinner

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}

packages/react-components/src/Spinner.tsx

@@ -77,6 +77,12 @@ export default styled(Spinner)`
     }
   }
 
+  &.mini {
+    .loader {
+      width: 22px;
+    }
+  }
+
   &.push {
     .loader {
       width: 40px;