Add console scanning indicator

src/renderer/containers/Console/NewConnectionList.tsx

@@ -1,20 +1,35 @@
 /** @jsx jsx */
 import { DiscoveredConsoleInfo } from "@console/types";
 import { css, jsx } from "@emotion/react";
+import CircularProgress from "@material-ui/core/CircularProgress";
 import React from "react";
 
 import { InfoBlock } from "@/components/InfoBlock";
 
 import { NewConnectionItem } from "./NewConnectionItem";
 
 export interface NewConnectionListProps {
+  isScanning?: boolean;
   consoleItems: DiscoveredConsoleInfo[];
   onClick: (conn: DiscoveredConsoleInfo) => void;
 }
 
-export const NewConnectionList: React.FC<NewConnectionListProps> = ({ consoleItems, onClick }) => {
+export const NewConnectionList: React.FC<NewConnectionListProps> = ({ consoleItems, isScanning, onClick }) => {
   return (
-    <InfoBlock title={`New Connections (${consoleItems.length})`}>
+    <InfoBlock
+      title={
+        <div
+          css={css`
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+          `}
+        >
+          <div>New Connections ({consoleItems.length})</div>
+          {isScanning && <CircularProgress size={16} thickness={6} color="inherit" />}
+        </div>
+      }
+    >
       <div
         css={css`
           display: flex;

src/renderer/containers/Console/index.tsx

@@ -32,6 +32,7 @@ const Outer = styled.div`
 `;
 
 export const Console: React.FC = () => {
+  const [isScanning, setIsScanning] = React.useState(false);
   const [modalOpen, setModalOpen] = React.useState(false);
   const [currentFormValues, setCurrentFormValues] = React.useState<Partial<StoredConnection> | null>(null);
   const savedConnections = useSettings((store) => store.connections);
@@ -42,15 +43,19 @@ export const Console: React.FC = () => {
 
   React.useEffect(() => {
     // Start scanning for new consoles
-    startDiscovery.renderer!.trigger({}).catch((err) => {
-      addToast(err.message ?? JSON.stringify(err), { appearance: "error" });
-    });
+    setIsScanning(false);
+    startDiscovery
+      .renderer!.trigger({})
+      .then(() => setIsScanning(true))
+      .catch((err) => {
+        addToast(err.message ?? JSON.stringify(err), { appearance: "error" });
+      });
 
     // Stop scanning on component unmount
     return () => {
       void stopDiscovery.renderer!.trigger({});
     };
-  }, []);
+  }, [addToast]);
 
   const onCancel = () => {
     setModalOpen(false);
@@ -112,6 +117,7 @@ export const Console: React.FC = () => {
               `}
             >
               <NewConnectionList
+                isScanning={isScanning}
                 consoleItems={consoleItemsToShow}
                 onClick={(item) => {
                   setCurrentFormValues({ ipAddress: item.ip });