UI: add loading icon to TelemetryLog.tsx

monkey/monkey_island/cc/ui/src/components/map/TelemetryLog.tsx

@@ -1,11 +1,13 @@
 import React, {useEffect, useRef, useState} from 'react';
 import AuthComponent from '../AuthComponent';
+import LoadingIcon from '../ui-components/LoadingIcon';
 
 
 const authComponent = new AuthComponent({});
 
 const TelemetryLog = (props: { onStatusChange: Function }) => {
 
+  let [telemetriesLoading, setTelemetriesLoading] = useState(true);
   let [telemetryUpdateInProgress, setTelemetryUpdateInProgress] = useState(false);
   let [telemetry, setTelemetry] = useState([]);
   let [lastTelemetryTimestamp, setLastTelemetryTimestamp] = useState(null);
@@ -36,6 +38,7 @@ const TelemetryLog = (props: { onStatusChange: Function }) => {
           setTelemetry(newTelem);
           setLastTelemetryTimestamp(res['timestamp']);
           setTelemetryUpdateInProgress(false);
+          setTelemetriesLoading(false);
           props.onStatusChange();
 
           let telemConsoleRef = telemetryConsole.current;
@@ -87,10 +90,11 @@ const TelemetryLog = (props: { onStatusChange: Function }) => {
   }
 
   return (
-    <>
+    <div className={'telemetry-log-section'}>
+      {telemetriesLoading && <LoadingIcon/>}
       {renderTelemetryLineCount()}
       {renderTelemetryConsole()}
-    </>);
+    </div>);
 }
 
 export default TelemetryLog;

monkey/monkey_island/cc/ui/src/styles/components/Map.scss

@@ -46,3 +46,10 @@
   width: 100%;
   padding-bottom: 10px;
 }
+
+.telemetry-log-section .loading-icon{
+  position: relative;
+  color: white;
+  z-index: 5;
+  margin-top: 30px;
+}