Broken icons when mizu disconnect (#419)

ui/src/components/TrafficPage.tsx

@@ -176,8 +176,10 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({setAnalyzeStatus, onTLS
     return (
         <div className="TrafficPage">
             <div className="TrafficPageHeader">
-                <img style={{cursor: "pointer", marginRight: 15, height: 30}} alt="pause"
-                    src={connection === ConnectionStatus.Connected ? pauseIcon : playIcon} onClick={toggleConnection}/>
+                <img className="playPauseIcon" style={{visibility: connection === ConnectionStatus.Connected ? "visible" : "hidden"}} alt="pause"
+                    src={pauseIcon} onClick={toggleConnection}/>
+                <img className="playPauseIcon" style={{position: "absolute", visibility: connection === ConnectionStatus.Connected ? "hidden" : "visible"}} alt="play"
+                     src={playIcon} onClick={toggleConnection}/>
                 <div className="connectionText">
                     {getConnectionTitle()}
                     <div className={"indicatorContainer " + getConnectionStatusClass(true)}>

ui/src/components/style/TrafficPage.sass

@@ -110,3 +110,8 @@
     align-items: center
     height: 17px
     font-size: 16px
+
+.playPauseIcon
+    cursor: pointer
+    margin-right: 15px
+    height: 30px
\ No newline at end of file