From 7800dc237845cc4464c877047d70ca20e01069d8 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Sat, 30 Nov 2019 15:11:42 +0100
Subject: [PATCH 1/2] Render staking accounts in background

---
 packages/app-staking/src/index.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/app-staking/src/index.tsx b/packages/app-staking/src/index.tsx
index 7b38851fcc74..e3bf1e160e4a 100644
--- a/packages/app-staking/src/index.tsx
+++ b/packages/app-staking/src/index.tsx
@@ -9,7 +9,7 @@ import { ComponentProps } from './types';
 
 import React from 'react';
 import { Route, Switch } from 'react-router';
-import { useRouteMatch } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 import { Option } from '@polkadot/types';
 import { HelpOverlay } from '@polkadot/react-components';
@@ -48,7 +48,7 @@ function App ({ basePath, className, t }: Props): React.ReactElement<Props> {
   const recentlyOnline = trackStream<DerivedHeartbeats>(api.derive.imOnline.receivedHeartbeats, []);
   const stakingOverview = trackStream<DerivedStakingOverview>(api.derive.staking.overview, []);
   const sessionRewards = useSessionRewards(MAX_SESSIONS);
-  const routeMatch = useRouteMatch({ path: basePath, strict: true });
+  const location = useLocation();
 
   const hasQueries = hasAccounts && !!(api.query.imOnline?.authoredBlocks);
   const [allStashes, allControllers] = stakingControllers || EMPTY_ALL;
@@ -103,12 +103,12 @@ function App ({ basePath, className, t }: Props): React.ReactElement<Props> {
         />
       </header>
       <Switch>
-        <Route path={`${basePath}/actions`}>{_renderComponent(Actions)}</Route>
         <Route path={`${basePath}/query/:value`}>{_renderComponent(Query)}</Route>
         <Route path={`${basePath}/query`}>{_renderComponent(Query)}</Route>
         <Route path={`${basePath}/returns`}>{_renderComponent(Targets)}</Route>
       </Switch>
-      {_renderComponent(Overview, routeMatch?.isExact ? '' : 'staking--hidden')}
+      {_renderComponent(Actions, location.pathname === `${basePath}/actions` ? '' : 'staking--hidden')}
+      {_renderComponent(Overview, location.pathname === basePath ? '' : 'staking--hidden')}
     </main>
   );
 }

From 39118bc6c2ace7ca42cc868482bc399a08ee150c Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Sat, 30 Nov 2019 15:15:26 +0100
Subject: [PATCH 2/2] Extract location.pathname

---
 packages/app-staking/src/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/app-staking/src/index.tsx b/packages/app-staking/src/index.tsx
index e3bf1e160e4a..5f2c2b7e380a 100644
--- a/packages/app-staking/src/index.tsx
+++ b/packages/app-staking/src/index.tsx
@@ -43,12 +43,12 @@ function transformStakingControllers ([stashes, controllers]: [AccountId[], Opti
 function App ({ basePath, className, t }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const { allAccounts, hasAccounts } = useAccounts();
+  const { pathname } = useLocation();
   const stakingControllers = trackStream<[string[], string[]]>(api.derive.staking.controllers, [], { transform: transformStakingControllers });
   const bestNumber = trackStream<BlockNumber>(api.derive.chain.bestNumber, []);
   const recentlyOnline = trackStream<DerivedHeartbeats>(api.derive.imOnline.receivedHeartbeats, []);
   const stakingOverview = trackStream<DerivedStakingOverview>(api.derive.staking.overview, []);
   const sessionRewards = useSessionRewards(MAX_SESSIONS);
-  const location = useLocation();
 
   const hasQueries = hasAccounts && !!(api.query.imOnline?.authoredBlocks);
   const [allStashes, allControllers] = stakingControllers || EMPTY_ALL;
@@ -107,8 +107,8 @@ function App ({ basePath, className, t }: Props): React.ReactElement<Props> {
         <Route path={`${basePath}/query`}>{_renderComponent(Query)}</Route>
         <Route path={`${basePath}/returns`}>{_renderComponent(Targets)}</Route>
       </Switch>
-      {_renderComponent(Actions, location.pathname === `${basePath}/actions` ? '' : 'staking--hidden')}
-      {_renderComponent(Overview, location.pathname === basePath ? '' : 'staking--hidden')}
+      {_renderComponent(Actions, pathname === `${basePath}/actions` ? '' : 'staking--hidden')}
+      {_renderComponent(Overview, pathname === basePath ? '' : 'staking--hidden')}
     </main>
   );
 }