diff --git a/src/pages/status/NodeSetupWorkflow.tsx b/src/pages/status/NodeSetupWorkflow.tsx
index 3a418c4..c8420b9 100644
--- a/src/pages/status/NodeSetupWorkflow.tsx
+++ b/src/pages/status/NodeSetupWorkflow.tsx
@@ -29,7 +29,7 @@ const useStyles = makeStyles((theme: Theme) =>
interface Step {
label: string
- condition: boolean
+ isOk: boolean
isLoading: boolean
component: ReactElement
}
@@ -57,37 +57,37 @@ export default function NodeSetupWorkflow({
const steps: Step[] = [
{
label: 'Connected to Node DebugAPI',
- condition: debugApiConnection.isOk,
+ isOk: debugApiConnection.isOk,
isLoading: debugApiConnection.isLoading,
component: ,
},
{
label: 'Running latest Bee version',
- condition: nodeVersion.isOk,
+ isOk: nodeVersion.isOk,
isLoading: nodeVersion.isLoading,
component: ,
},
{
label: 'Connected to Ethereum Blockchain',
- condition: ethereumConnection.isOk,
+ isOk: ethereumConnection.isOk,
isLoading: ethereumConnection.isLoading,
component: ,
},
{
label: 'Deployed and Funded Chequebook',
- condition: chequebook.isOk,
+ isOk: chequebook.isOk,
isLoading: chequebook.isLoading,
component: ,
},
{
label: 'Connected to Node API',
- condition: apiConnection.isOk,
+ isOk: apiConnection.isOk,
isLoading: apiConnection.isLoading,
component: ,
},
{
label: 'Connected to Peers',
- condition: topology.isOk,
+ isOk: topology.isOk,
isLoading: topology.isLoading,
component: ,
},
@@ -95,11 +95,15 @@ export default function NodeSetupWorkflow({
useEffect(() => {
// If the user already changed the active step we don't want to overwrite it
- if (activeStep > 0 && activeStep < steps.length) return
+ if (activeStep >= 0 && activeStep < steps.length) return
+
+ // If any step is not fully loaded yet return
+ if (!steps.every(step => !step.isLoading)) return
// Select first step that is not OK
+ // This is deliberately a for loop (and not forEach) so that we can terminate the useEffect from within the cycle
for (let i = 0; i < steps.length; ++i) {
- if (!steps[i].condition) {
+ if (!steps[i].isOk) {
setActiveStep(i)
return
@@ -127,7 +131,7 @@ export default function NodeSetupWorkflow({
- {steps.map(({ label, condition, component, isLoading }, index) => (
+ {steps.map(({ label, isOk, component, isLoading }, index) => (
{
if (isLoading) return
- if (condition) return
+ if (isOk) return
return
}}