Intention rendering non-cached (#2488)

* Intention rendering non-cached

* state updates

packages/page-staking/src/Actions/Account/index.tsx

@@ -269,7 +269,7 @@ function Account ({ allStashes, className, isOwnStash, next, onUpdateType, rewar
       </td>
       {isStashValidating
         ? (
-          <td>
+          <td className='all'>
             <AddressInfo
               address={stashId}
               withBalance={false}
@@ -279,7 +279,7 @@ function Account ({ allStashes, className, isOwnStash, next, onUpdateType, rewar
           </td>
         )
         : (
-          <td>
+          <td className='all'>
             {isStashNominating && (
               <>
                 {activeNoms.length !== 0 && (

packages/page-staking/src/Overview/Address/index.tsx

@@ -141,7 +141,7 @@ function Address ({ address, className, filterName, hasQueries, isAuthor, isElec
         onlineCount={onlineCount}
         onlineMessage={onlineMessage}
       />
-      <td className='address'>
+      <td className='address all'>
         <AddressSmall value={address} />
       </td>
       <StakeOther

packages/page-staking/src/Overview/CurrentList.tsx

@@ -17,8 +17,7 @@ import Address from './Address';
 interface Props {
   authorsMap: Record<string, string>;
   hasQueries: boolean;
-  isIntentions: boolean;
-  isVisible: boolean;
+  isIntentions?: boolean;
   lastAuthors?: string[];
   next?: string[];
   recentlyOnline?: DeriveHeartbeats;
@@ -68,10 +67,10 @@ function reduceDetails (state: Record<string, AddressDetails>, _details: Address
   }, { ...state });
 }
 
-function getDetails (stakingOverview: DeriveStakingOverview, validators: AccountExtend[]): AddressDetails[] {
+function getDetails (stakingOverview: DeriveStakingOverview, validators?: AccountExtend[]): AddressDetails[] {
   const allPoints = [...stakingOverview.eraPoints.individual.entries()];
 
-  return validators.map(([address]): AddressDetails => {
+  return (validators || []).map(([address]): AddressDetails => {
     const points = allPoints.find(([accountId]): boolean => accountId.eq(address));
 
     return {
@@ -97,7 +96,7 @@ function getFiltered (stakingOverview: DeriveStakingOverview, favorites: string[
   };
 }
 
-function CurrentList ({ authorsMap, hasQueries, isIntentions, isVisible, lastAuthors, next, recentlyOnline, setNominators, stakingOverview }: Props): React.ReactElement<Props> | null {
+function CurrentList ({ authorsMap, hasQueries, isIntentions, lastAuthors, next, recentlyOnline, setNominators, stakingOverview }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const [favorites, toggleFavorite] = useFavorites(STORE_FAVS_BASE);
   const [{ elected, validators, waiting }, setFiltered] = useState<Filtered>({});
@@ -105,19 +104,18 @@ function CurrentList ({ authorsMap, hasQueries, isIntentions, isVisible, lastAut
   const [addressDetails, dispatchDetails] = useReducer(reduceDetails, {});
 
   useEffect((): void => {
-    isVisible && stakingOverview && setFiltered(
-      getFiltered(stakingOverview, favorites, next)
-    );
-  }, [favorites, isVisible, next, stakingOverview]);
+    if (stakingOverview) {
+      const filtered = getFiltered(stakingOverview, favorites, next);
 
-  useEffect((): void => {
-    stakingOverview && validators && dispatchDetails(
-      getDetails(stakingOverview, validators)
-    );
-  }, [stakingOverview, validators]);
+      setFiltered(filtered);
+      dispatchDetails(
+        getDetails(stakingOverview, filtered.validators)
+      );
+    }
+  }, [favorites, next, stakingOverview]);
 
-  const _renderRows = (addresses?: AccountExtend[], isMain?: boolean): React.ReactNode =>
-    addresses?.map(([address, isElected, isFavorite]): React.ReactNode => (
+  const _renderRows = (addresses?: AccountExtend[], isMain?: boolean): React.ReactNode[] =>
+    (addresses || []).map(([address, isElected, isFavorite]): React.ReactNode => (
       <Address
         address={address}
         filterName={nameFilter}
@@ -136,9 +134,20 @@ function CurrentList ({ authorsMap, hasQueries, isIntentions, isVisible, lastAut
       />
     ));
 
-  return (
-    <div className={`${!isVisible && 'staking--hidden'}`}>
-      <Table className={isIntentions ? 'staking--hidden' : ''}>
+  return isIntentions
+    ? (
+      <Table>
+        <Table.Head>
+          <th colSpan={9}className='start'><h1>{t('intentions')}</h1></th>
+        </Table.Head>
+        <Table.Body empty={waiting && t('No waiting validators found')}>
+          {_renderRows(elected, false).concat(..._renderRows(waiting, false))}
+          {}
+        </Table.Body>
+      </Table>
+    )
+    : (
+      <Table>
         <Table.Head filter={
           <Input
             autoFocus
@@ -160,19 +169,7 @@ function CurrentList ({ authorsMap, hasQueries, isIntentions, isVisible, lastAut
           {_renderRows(validators, true)}
         </Table.Body>
       </Table>
-      {isIntentions && (
-        <Table>
-          <Table.Head>
-            <th colSpan={9}className='start'><h1>{t('intentions')}</h1></th>
-          </Table.Head>
-          <Table.Body empty={waiting && t('No waiting validators found')}>
-            {_renderRows(elected, false)}
-            {_renderRows(waiting, false)}
-          </Table.Body>
-        </Table>
-      )}
-    </div>
-  );
+    );
 }
 
 export default React.memo(CurrentList);

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

@@ -6,32 +6,28 @@ import { DeriveHeartbeats, DeriveStakingOverview } from '@polkadot/api-derive/ty
 import { BareProps } from '@polkadot/react-components/types';
 
 import React, { useContext } from 'react';
-import { useLocation } from 'react-router-dom';
 import { BlockAuthorsContext } from '@polkadot/react-query';
 
 import CurrentList from './CurrentList';
 
 interface Props extends BareProps {
   hasQueries: boolean;
-  isVisible: boolean;
+  isIntentions?: boolean;
   recentlyOnline?: DeriveHeartbeats;
   next?: string[];
   setNominators: (nominators: string[]) => void;
   stakingOverview?: DeriveStakingOverview;
 }
 
-function Overview ({ hasQueries, isVisible, className, recentlyOnline, next, setNominators, stakingOverview }: Props): React.ReactElement<Props> {
-  const { pathname } = useLocation();
+function Overview ({ className, hasQueries, isIntentions, recentlyOnline, next, setNominators, stakingOverview }: Props): React.ReactElement<Props> {
   const { byAuthor, lastBlockAuthors } = useContext(BlockAuthorsContext);
-  const isIntentions = pathname !== '/staking';
 
   return (
-    <div className={`staking--Overview ${className} ${!isVisible && 'staking--hidden'}`}>
+    <div className={`staking--Overview ${className}`}>
       <CurrentList
         authorsMap={byAuthor}
         hasQueries={hasQueries}
         isIntentions={isIntentions}
-        isVisible={isVisible}
         lastAuthors={lastBlockAuthors}
         next={next}
         recentlyOnline={recentlyOnline}

packages/page-staking/src/index.tsx

@@ -118,6 +118,16 @@ function StakingApp ({ basePath, className }: Props): React.ReactElement<Props>
         <Route path={`${basePath}/returns`}>
           <Targets />
         </Route>
+        <Route path={`${basePath}/waiting`}>
+          <Overview
+            hasQueries={hasQueries}
+            isIntentions
+            recentlyOnline={recentlyOnline}
+            next={next}
+            setNominators={dispatchNominators}
+            stakingOverview={stakingOverview}
+          />
+        </Route>
       </Switch>
       <Actions
         allRewards={allRewards}
@@ -127,8 +137,8 @@ function StakingApp ({ basePath, className }: Props): React.ReactElement<Props>
         stakingOverview={stakingOverview}
       />
       <Overview
+        className={basePath === pathname ? '' : 'staking--hidden'}
         hasQueries={hasQueries}
-        isVisible={[basePath, `${basePath}/waiting`].includes(pathname)}
         recentlyOnline={recentlyOnline}
         next={next}
         setNominators={dispatchNominators}
@@ -143,10 +153,6 @@ export default React.memo(styled(StakingApp)`
     display: none;
   }
 
-  .staking--queryInput {
-    margin-bottom: 1.5rem;
-  }
-
   .staking--Chart h1 {
     margin-bottom: 0.5rem;
   }