Align payout page loading, display (#2685)

packages/apps/public/locales/en/app-staking.json

@@ -153,10 +153,10 @@
   "validators/nominators": "validators/nominators",
   "value bonded": "value bonded",
   "waiting": "waiting",
-  "{{count}} stakers": "{{count}} stakers",
+  "{{count}} own stashes": "{{count}} own stashes",
   "{{currency}} average": "{{currency}} average",
   "{{currency}} clipped": "{{currency}} clipped",
   "{{currency}} rewards": "{{currency}} rewards",
   "{{currency}} slashed": "{{currency}} slashed",
   "{{currency}} total": "{{currency}} total"
-}
+}

packages/apps/public/locales/en/translation.json

@@ -980,7 +980,7 @@
   "your new password": "",
   "{{blocks}} blocks": "",
   "{{count}} key/value pairs encoded for submission": "",
-  "{{count}} stakers": "",
+  "{{count}} own stashes": "",
   "{{currency}} average": "",
   "{{currency}} clipped": "",
   "{{currency}} rewards": "",
@@ -996,4 +996,4 @@
   "{{threshold}}, not passing": "",
   "{{threshold}}, passing": "",
   "{{value}}x voting balance, locked for {{lock}}x enactment ({{period}} days)": ""
-}
+}

packages/page-staking/src/Payouts/Validator.tsx

@@ -65,7 +65,7 @@ function Validator ({ className, isDisabled, payout }: Props): React.ReactElemen
         className='start'
         colSpan={2}
       >
-        <Expander summary={t('{{count}} stakers', { replace: { count: numNominators } })}>
+        <Expander summary={t('{{count}} own stashes', { replace: { count: numNominators } })}>
           {Object.entries(nominators).map(([stashId, balance]) =>
             <AddressMini
               balance={balance}

packages/page-staking/src/Payouts/index.tsx

@@ -165,13 +165,12 @@ function Payouts ({ className, isInElection }: Props): React.ReactElement<Props>
           />
         ))}
       </Table>
-      {api.tx.staking.payoutStakers && (
+      {api.tx.staking.payoutStakers && validators && (validators.length !== 0) && (
         <Table
-          empty={validators && t('No pending era payouts from validators')}
           header={headerValidators}
           isFixed
         >
-          {validators?.map((payout): React.ReactNode => (
+          {validators.map((payout): React.ReactNode => (
             <Validator
               isDisabled={isInElection}
               key={payout.validatorId}