Merge pull request #202 from PixnBits/fix/disable-connection-while-connecting

fix(Connect): disable connecting multiple times

src/components/PageComponents/Connect/HTTP.tsx

@@ -1,3 +1,4 @@
+import React, { useState } from "react";
 import { TabElementProps } from "@app/components/Dialog/NewDeviceDialog";
 import { Button } from "@components/UI/Button.js";
 import { Input } from "@components/UI/Input.js";
@@ -33,10 +34,13 @@ export const HTTP = ({ closeDialog }: TabElementProps): JSX.Element => {
     defaultValue: location.protocol === "https:",
   });
 
+  const [connectionInProgress, setConnectionInProgress] = useState(false);
+
   const onSubmit = handleSubmit(async (data) => {
+    setConnectionInProgress(true);
+    
     const id = randId();
     const device = addDevice(id);
-    setSelectedDevice(id);
     const connection = new HttpConnection(id);
     // TODO: Promise never resolves
     await connection.connect({
@@ -44,9 +48,10 @@ export const HTTP = ({ closeDialog }: TabElementProps): JSX.Element => {
       fetchInterval: 2000,
       tls: data.tls,
     });
+
+    setSelectedDevice(id);
     device.addConnection(connection);
     subscribeAll(device, connection);
-
     closeDialog();
   });
 
@@ -58,6 +63,7 @@ export const HTTP = ({ closeDialog }: TabElementProps): JSX.Element => {
           // label="IP Address/Hostname"
           prefix={tlsEnabled ? "https://" : "http://"}
           placeholder="000.000.000.000 / meshtastic.local"
+          disabled={connectionInProgress}
           {...register("ip")}
         />
         <Controller
@@ -69,7 +75,7 @@ export const HTTP = ({ closeDialog }: TabElementProps): JSX.Element => {
               <Switch
                 // label="Use TLS"
                 // description="Description"
-                disabled={location.protocol === "https:"}
+                disabled={location.protocol === "https:" || connectionInProgress}
                 checked={value}
                 {...rest}
               />
@@ -77,8 +83,8 @@ export const HTTP = ({ closeDialog }: TabElementProps): JSX.Element => {
           )}
         />
       </div>
-      <Button type="submit">
-        <span>Connect</span>
+      <Button type="submit" disabled={connectionInProgress}>
+        <span>{connectionInProgress ? 'Connecting...' : 'Connect' }</span>
       </Button>
     </form>
   );