unstable

src/components/Topbar/Topbar.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react';
-import { DSP, AppPage } from '../../types';
+import { DSP, AppPage, isConnected } from '../../types';
 import AnimatedLogo from '../../assets/icons/AnimatedLogo';
 import { PlusIcon } from '../../assets/icons/PlusIcon';
 import { CrownIcon } from '../../assets/icons/CrownIcon';
@@ -36,7 +36,7 @@ function Tab({
   onDisconnect: (dsp: DSP) => void;
   actions?: React.ReactNode;
 }) {
-  const isConnected = dsp.status === 'connected';
+  const isDspConnected = isConnected(dsp);
 
   const handleTabKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
     if (e.key === 'Enter' || e.key === ' ') {
@@ -60,18 +60,26 @@ function Tab({
       <button
         type="button"
         className="tab-led"
-        aria-label={isConnected ? `Disconnect ${dsp.name}` : `Connect ${dsp.name}`}
+        aria-label={isDspConnected ? `Disconnect ${dsp.name}` : `Connect ${dsp.name}`}
         onClick={(e) => {
           e.stopPropagation();
 
-          if (isConnected) {
+          if (isDspConnected) {
             onDisconnect(dsp);
           } else {
             onConnect(dsp);
           }
         }}
       >
-        <Led status={dsp.status} />
+        <Led
+          status={
+            dsp.isConnecting
+              ? 'connecting'
+              : isConnected(dsp)
+                ? 'connected'
+                : 'disconnected'
+          }
+        />
       </button>
 
       <span className="tab-name" title={dsp.name}>