From 12f3f40e3695e9032bc0275a2460e8af88c54239 Mon Sep 17 00:00:00 2001
From: David Lechner <david@pybricks.com>
Date: Mon, 17 May 2021 13:01:10 -0500
Subject: [PATCH] use spinner when bluetooth is connecting

It can take a while (especially on Windows) before the connection is
ready and the other buttons become enabled. So use a spinner to let
the user know that we are working on it.

Issue: https://github.com/pybricks/support/issues/315
---
 src/hub/BluetoothButton.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/hub/BluetoothButton.tsx b/src/hub/BluetoothButton.tsx
index 2f301f37..572bd5fa 100644
--- a/src/hub/BluetoothButton.tsx
+++ b/src/hub/BluetoothButton.tsx
@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2020 The Pybricks Authors
+// Copyright (c) 2020-2021 The Pybricks Authors
 
 import { connect } from 'react-redux';
 import { toggleBluetooth } from '../ble/actions';
@@ -11,7 +11,10 @@ import { TooltipId } from '../toolbar/i18n';
 import btConnectedIcon from './bt-connected.svg';
 import btDisconnectedIcon from './bt-disconnected.svg';
 
-type StateProps = Pick<ActionButtonProps, 'tooltip' | 'icon' | 'enabled'>;
+type StateProps = Pick<
+    ActionButtonProps,
+    'tooltip' | 'icon' | 'enabled' | 'showProgress'
+>;
 type DispatchProps = Pick<ActionButtonProps, 'onAction'>;
 
 const mapStateToProps = (state: RootState): StateProps => {
@@ -29,6 +32,7 @@ const mapStateToProps = (state: RootState): StateProps => {
             tooltip: TooltipId.BluetoothDisconnect,
             icon: btConnectedIcon,
             enabled: state.ble.connection === BleConnectionState.Connected,
+            showProgress: state.ble.connection === BleConnectionState.Connecting,
         };
     }
 };