feat: add starting state to sidebar indicator (#587)

src/components/Card.tsx

@@ -64,7 +64,7 @@ export default function Card({ buttonProps, icon, title, subtitle, status }: Pro
   } else if (status === 'error') {
     statusIcon = <AlertCircle size="13" color="#f44336" />
   } else if (status === 'loading') {
-    statusIcon = <RefreshLine size="13" color="#096cca" />
+    statusIcon = <RefreshLine size="13" color="orange" />
   }
 
   return (

src/components/StatusIcon.tsx

@@ -25,6 +25,9 @@ export default function StatusIcon({ checkState, size, className, isLoading }: P
     case CheckState.ERROR:
       backgroundColor = '#ff3a52'
       break
+    case CheckState.STARTING:
+      backgroundColor = 'orange'
+      break
     default:
       // Default is error
       backgroundColor = '#ff3a52'

src/pages/info/NodeInfoCard.tsx

@@ -9,10 +9,10 @@ import { CheckState, Context as BeeContext } from '../../providers/Bee'
 import { ROUTES } from '../../routes'
 
 export default function NodeInfoCard(): ReactElement {
-  const { debugApiHealth, debugApiReadiness, status } = useContext(BeeContext)
+  const { status } = useContext(BeeContext)
   const navigate = useNavigate()
 
-  if (debugApiHealth && !debugApiReadiness) {
+  if (status.all === CheckState.STARTING) {
     return (
       <Card
         buttonProps={{ iconType: Settings, children: 'Open node setup', onClick: () => navigate(ROUTES.STATUS) }}

src/providers/Bee.tsx

@@ -25,6 +25,7 @@ export enum CheckState {
   OK = 'OK',
   WARNING = 'Warning',
   ERROR = 'Error',
+  STARTING = 'Starting',
 }
 
 interface StatusItem {
@@ -119,7 +120,7 @@ interface Props {
 
 function getStatus(
   debugApiHealth: Health | null,
-  nodeAddresses: NodeAddresses | null,
+  debugApiReadiness: boolean,
   nodeInfo: NodeInfo | null,
   apiHealth: boolean,
   topology: Topology | null,
@@ -171,18 +172,23 @@ function getStatus(
     else status.chequebook.checkState = CheckState.OK
   }
 
-  // Determine overall status
-  if (Object.values(status).some(({ isEnabled, checkState }) => isEnabled && checkState === CheckState.ERROR)) {
-    status.all = CheckState.ERROR
+  status.all = determineOverallStatus(debugApiHealth, debugApiReadiness, status)
+
+  return status
+}
+
+function determineOverallStatus(debugApiHealth: Health | null, debugApiReadiness: boolean, status: Status): CheckState {
+  if (debugApiHealth?.status === 'ok' && !debugApiReadiness) {
+    return CheckState.STARTING
+  } else if (Object.values(status).some(({ isEnabled, checkState }) => isEnabled && checkState === CheckState.ERROR)) {
+    return CheckState.ERROR
   } else if (
     Object.values(status).some(({ isEnabled, checkState }) => isEnabled && checkState === CheckState.WARNING)
   ) {
-    status.all = CheckState.WARNING
+    return CheckState.WARNING
   } else {
-    status.all = CheckState.OK
+    return CheckState.OK
   }
-
-  return status
 }
 
 // This does not need to be exposed and works much better as variable than state variable which may trigger some unnecessary re-renders
@@ -390,7 +396,7 @@ export function Provider({ children }: Props): ReactElement {
 
   const status = getStatus(
     debugApiHealth,
-    nodeAddresses,
+    debugApiReadiness,
     nodeInfo,
     apiHealth,
     topology,