From ba5b3c45a0d6492af804fd469ce94d7e491eb9a8 Mon Sep 17 00:00:00 2001
From: Jaco <jacogr@gmail.com>
Date: Wed, 4 May 2022 14:15:05 +0200
Subject: [PATCH] Improve poll loading experience (#7522)

---
 packages/page-staking/src/Pools/Pool.tsx  | 107 +++++++++++-----------
 packages/page-staking/src/Pools/Pools.tsx |   2 +-
 2 files changed, 57 insertions(+), 52 deletions(-)

diff --git a/packages/page-staking/src/Pools/Pool.tsx b/packages/page-staking/src/Pools/Pool.tsx
index 2840ecbdf0..c44e42fd0e 100644
--- a/packages/page-staking/src/Pools/Pool.tsx
+++ b/packages/page-staking/src/Pools/Pool.tsx
@@ -7,7 +7,7 @@ import type { MembersMapEntry, Params } from './types';
 import React, { useCallback } from 'react';
 import styled from 'styled-components';
 
-import { AddressMini, ExpandButton, ExpanderScroll } from '@polkadot/react-components';
+import { AddressMini, ExpandButton, ExpanderScroll, Spinner } from '@polkadot/react-components';
 import { useToggle } from '@polkadot/react-hooks';
 import { FormatBalance } from '@polkadot/react-query';
 import { formatNumber } from '@polkadot/util';
@@ -24,7 +24,7 @@ interface Props {
   poolId: BN;
 }
 
-function Pool ({ className = '', members, ownAccounts, params, poolId }: Props): React.ReactElement<Props> | null {
+function Pool ({ className = '', members, ownAccounts, params, poolId }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const info = usePoolInfo(poolId);
   const [isExpanded, toggleExpanded] = useToggle(false);
@@ -42,18 +42,14 @@ function Pool ({ className = '', members, ownAccounts, params, poolId }: Props):
     [members]
   );
 
-  if (!info) {
-    return null;
-  }
-
   return (
     <>
       <tr className={`${className}${isExpanded ? ' noBorder' : ''}`}>
         <td className='number'><h1>{formatNumber(poolId)}</h1></td>
-        <td className='start'>{info.metadata}</td>
-        <td className='number'>{info.bonded.state.type}</td>
-        <td className='number'><FormatBalance value={info.bonded.points} /></td>
-        <td className='number media--1100'>{!info.rewardClaimable.isZero() && <FormatBalance value={info.rewardClaimable} />}</td>
+        <td className='start'>{info && info.metadata}</td>
+        <td className='number'>{info && info.bonded.state.type}</td>
+        <td className='number'>{info && <FormatBalance value={info.bonded.points} />}</td>
+        <td className='number media--1100'>{info && !info.rewardClaimable.isZero() && <FormatBalance value={info.rewardClaimable} />}</td>
         <td className='number'>
           {members && members.length !== 0 && (
             <ExpanderScroll
@@ -64,49 +60,58 @@ function Pool ({ className = '', members, ownAccounts, params, poolId }: Props):
           )}
         </td>
         <td className='button'>
-          <Join
-            isDisabled={!info.bonded.state.isOpen || (!!params.maxMembersPerPool && !info.bonded.memberCounter.ltn(params.maxMembersPerPool))}
-            ownAccounts={ownAccounts}
-            params={params}
-            poolId={poolId}
-          />
-          <ExpandButton
-            expanded={isExpanded}
-            onClick={toggleExpanded}
-          />
-        </td>
-      </tr>
-      <tr className={`${className} ${isExpanded ? 'isExpanded' : 'isCollapsed'}`}>
-        <td colSpan={4}>
-          <div className='label-column-right'>
-            <div className='label'>{t('root')}</div>
-            <div className='inline-balance'><AddressMini value={info.bonded.roles.root} /></div>
-          </div>
-          <div className='label-column-right'>
-            <div className='label'>{t('creator')}</div>
-            <div className='inline-balance'><AddressMini value={info.bonded.roles.depositor} /></div>
-          </div>
-          <div className='label-column-right'>
-            <div className='label'>{t('nominator')}</div>
-            <div className='inline-balance'><AddressMini value={info.bonded.roles.nominator} /></div>
-          </div>
-          <div className='label-column-right'>
-            <div className='label'>{t('toggler')}</div>
-            <div className='inline-balance'><AddressMini value={info.bonded.roles.stateToggler} /></div>
-          </div>
-        </td>
-        <td className='number media--1100' />
-        <td colSpan={2}>
-          <div className='label-column-right'>
-            <div className='label'>{t('stash')}</div>
-            <div className='inline-balance'><AddressMini value={info.stashId} /></div>
-          </div>
-          <div className='label-column-right'>
-            <div className='label'>{t('rewards')}</div>
-            <div className='inline-balance'><AddressMini value={info.rewardId} /></div>
-          </div>
+          {info
+            ? (
+              <>
+                <Join
+                  isDisabled={!info.bonded.state.isOpen || (!!params.maxMembersPerPool && !info.bonded.memberCounter.ltn(params.maxMembersPerPool))}
+                  ownAccounts={ownAccounts}
+                  params={params}
+                  poolId={poolId}
+                />
+                <ExpandButton
+                  expanded={isExpanded}
+                  onClick={toggleExpanded}
+                />
+              </>
+            )
+            : <Spinner noLabel />
+          }
         </td>
       </tr>
+      {info && (
+        <tr className={`${className} ${isExpanded ? 'isExpanded' : 'isCollapsed'}`}>
+          <td colSpan={4}>
+            <div className='label-column-right'>
+              <div className='label'>{t('root')}</div>
+              <div className='inline-balance'><AddressMini value={info.bonded.roles.root} /></div>
+            </div>
+            <div className='label-column-right'>
+              <div className='label'>{t('creator')}</div>
+              <div className='inline-balance'><AddressMini value={info.bonded.roles.depositor} /></div>
+            </div>
+            <div className='label-column-right'>
+              <div className='label'>{t('nominator')}</div>
+              <div className='inline-balance'><AddressMini value={info.bonded.roles.nominator} /></div>
+            </div>
+            <div className='label-column-right'>
+              <div className='label'>{t('toggler')}</div>
+              <div className='inline-balance'><AddressMini value={info.bonded.roles.stateToggler} /></div>
+            </div>
+          </td>
+          <td className='number media--1100' />
+          <td colSpan={2}>
+            <div className='label-column-right'>
+              <div className='label'>{t('stash')}</div>
+              <div className='inline-balance'><AddressMini value={info.stashId} /></div>
+            </div>
+            <div className='label-column-right'>
+              <div className='label'>{t('rewards')}</div>
+              <div className='inline-balance'><AddressMini value={info.rewardId} /></div>
+            </div>
+          </td>
+        </tr>
+      )}
     </>
   );
 }
diff --git a/packages/page-staking/src/Pools/Pools.tsx b/packages/page-staking/src/Pools/Pools.tsx
index b6f9d1e020..253a0bb6bb 100644
--- a/packages/page-staking/src/Pools/Pools.tsx
+++ b/packages/page-staking/src/Pools/Pools.tsx
@@ -75,7 +75,7 @@ function Pools ({ className, ids, ownPools, params }: Props): React.ReactElement
       </Button.Group>
       <Table
         className={className}
-        empty={filtered && t<string>('No available nomination pools')}
+        empty={membersMap && filtered && t<string>('No available nomination pools')}
         emptySpinner={t<string>('Retrieving nomination pools')}
         header={header}
         withCollapsibleRows