From 6f3ecdea16a3383066fd1487b98ef3c66a86b7ca Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Mon, 9 Mar 2020 20:52:30 +0100
Subject: [PATCH] Load accounts in bg

---
 .../page-staking/src/Actions/Account/index.tsx   |  7 ++++---
 packages/page-staking/src/Actions/index.tsx      |  1 +
 packages/page-staking/src/index.tsx              | 16 +++++++---------
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/page-staking/src/Actions/Account/index.tsx b/packages/page-staking/src/Actions/Account/index.tsx
index 09479ed95b..6653bb1db5 100644
--- a/packages/page-staking/src/Actions/Account/index.tsx
+++ b/packages/page-staking/src/Actions/Account/index.tsx
@@ -33,6 +33,7 @@ interface Props {
   allStashes?: string[];
   className?: string;
   isOwnStash: boolean;
+  isVisible: boolean;
   next: string[];
   onUpdateType: (stashId: string, type: 'validator' | 'nominator' | 'started' | 'other') => void;
   recentlyOnline?: DerivedHeartbeats;
@@ -91,15 +92,15 @@ function getStakeState (allAccounts: string[], allStashes: string[] | undefined,
   };
 }
 
-function Account ({ allStashes, className, isOwnStash, next, onUpdateType, stakingOverview, stashId }: Props): React.ReactElement<Props> {
+function Account ({ allStashes, className, isOwnStash, isVisible, next, onUpdateType, stakingOverview, stashId }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { queueExtrinsic } = useContext(StatusContext);
   const { api } = useApi();
   const { allAccounts } = useAccounts();
   const validateInfo = useCall<ValidatorInfo>(api.query.staking.validators, [stashId]);
   const balancesAll = useCall<DerivedBalancesAll>(api.derive.balances.all as any, [stashId]);
-  const stakingAccount = useCall<DerivedStakingAccount>(api.derive.staking.account as any, [stashId]);
-  const stakingRewardsAll = useCall<DeriveStakerReward[]>(api.derive.staking.stakerRewards as any, [stashId]);
+  const stakingAccount = isVisible ? useCall<DerivedStakingAccount>(api.derive.staking.account as any, [stashId]) : undefined;
+  const stakingRewardsAll = isVisible ? useCall<DeriveStakerReward[]>(api.derive.staking.stakerRewards as any, [stashId]) : undefined;
   const [[stakingRewards, payoutEras], setStakingRewards] = useState<[DeriveStakerReward[], EraIndex[]]>([[], []]);
   const [{ controllerId, destination, hexSessionIdQueue, hexSessionIdNext, isLoading, isOwnController, isStashNominating, isStashValidating, nominees, sessionIds, validatorPrefs }, setStakeState] = useState<StakeState>({ controllerId: null, destination: 0, hexSessionIdNext: null, hexSessionIdQueue: null, isLoading: true, isOwnController: false, isStashNominating: false, isStashValidating: false, sessionIds: [] });
   const [activeNoms, setActiveNoms] = useState<string[]>([]);
diff --git a/packages/page-staking/src/Actions/index.tsx b/packages/page-staking/src/Actions/index.tsx
index caebab85c4..c3d7ef5067 100644
--- a/packages/page-staking/src/Actions/index.tsx
+++ b/packages/page-staking/src/Actions/index.tsx
@@ -101,6 +101,7 @@ export default function Actions ({ allStashes, className, isVisible, next, recen
                   activeEra={activeEra}
                   allStashes={allStashes}
                   isOwnStash={isOwnStash}
+                  isVisible={isVisible}
                   key={stashId}
                   next={next}
                   onUpdateType={_onUpdateType}
diff --git a/packages/page-staking/src/index.tsx b/packages/page-staking/src/index.tsx
index 4e14accdf2..7858bdb5c3 100644
--- a/packages/page-staking/src/index.tsx
+++ b/packages/page-staking/src/index.tsx
@@ -98,15 +98,6 @@ function StakingApp ({ basePath, className }: Props): React.ReactElement<Props>
         stakingOverview={stakingOverview}
       />
       <Switch>
-        <Route path={`${basePath}/actions`}>
-          <Actions
-            allStashes={allStashes}
-            isVisible={pathname === `${basePath}/actions`}
-            recentlyOnline={recentlyOnline}
-            next={next}
-            stakingOverview={stakingOverview}
-          />
-        </Route>
         <Route path={[`${basePath}/query/:value`, `${basePath}/query`]}>
           <Query />
         </Route>
@@ -114,6 +105,13 @@ function StakingApp ({ basePath, className }: Props): React.ReactElement<Props>
           <Targets />
         </Route>
       </Switch>
+      <Actions
+        allStashes={allStashes}
+        isVisible={pathname === `${basePath}/actions`}
+        recentlyOnline={recentlyOnline}
+        next={next}
+        stakingOverview={stakingOverview}
+      />
       <Overview
         hasQueries={hasQueries}
         isVisible={[basePath, `${basePath}/waiting`].includes(pathname)}