Only show dialog overlay for request device prompt (#216)

This avoids the user clicking through to "next" triggering a new call to
request device while the select device prompt is already up.

Author: microbit-robert

src/components/connection-prompt/ConnectDialogContainer.svelte

@@ -104,12 +104,12 @@
   };
 
   async function tryMicrobitUSBConnection(): Promise<void> {
+    $connectionDialogState.connectionState = ConnectDialogStates.BROWSER_DIALOG;
     let usb: MicrobitUSB | undefined;
     try {
       usb = await MicrobitUSB.requestConnection();
     } catch (err) {
-      handleConnectionError(err);
-      return;
+      return handleConnectionError(err);
     }
     return flashMicrobit(usb);
   }
@@ -215,6 +215,8 @@
 
 <div bind:this={dialogContainer}>
   <StandardDialog
+    hideContent={$connectionDialogState.connectionState ===
+      ConnectDialogStates.BROWSER_DIALOG}
     isOpen={$connectionDialogState.connectionState !== ConnectDialogStates.NONE &&
       !endOfFlow}
     onClose={connectionStateNone}

src/components/dialogs/StandardDialog.svelte

@@ -18,6 +18,7 @@
   export let closeOnEscape: boolean = true;
   export let isOpen: boolean;
   export let onClose: () => void;
+  export let hideContent: boolean = false;
 
   let finalFocusRef: Element | null;
 
@@ -90,6 +91,7 @@
       <div
         use:melt={$content}
         class="w-min h-min border-gray-200 border border-solid relative bg-white rounded-lg p-8 z-15"
+        class:hidden={hideContent}
         transition:scale={{
           duration: 200,
           start: 0.9,

src/script/stores/connectDialogStore.ts

@@ -27,6 +27,7 @@ export enum ConnectDialogStates {
   MANUAL_TUTORIAL, // Prompt with tutorial gif for manual installation (and downloading of program)
   USB_TRY_AGAIN, // Prompt user to try connecting via WebUSB again
   BLUETOOTH_TRY_AGAIN, // Prompt user to try connecting via WebBluetooth again
+  BROWSER_DIALOG, // Awaiting user interaction with browser dialog
 }
 
 export const connectionDialogState = writable<{