hub/sagas: show error if stopping failed

- Finish TODO to show error if stopping fails.
- Make button busy in case waiting for failure takes a long time.

src/toolbar/buttons/stop/StopButton.test.tsx

@@ -4,7 +4,7 @@
 import { act, cleanup } from '@testing-library/react';
 import React from 'react';
 import { testRender } from '../../../../test';
-import { stop } from '../../../hub/actions';
+import { hubStopUserProgram } from '../../../hub/actions';
 import { HubRuntimeState } from '../../../hub/reducers';
 import StopButton from './StopButton';
 
@@ -19,5 +19,5 @@ it('should dispatch action when clicked', async () => {
 
     await act(() => user.click(button.getByRole('button', { name: 'Stop' })));
 
-    expect(dispatch).toHaveBeenCalledWith(stop());
+    expect(dispatch).toHaveBeenCalledWith(hubStopUserProgram());
 });

src/toolbar/buttons/stop/StopButton.tsx

@@ -1,9 +1,9 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2020-2022 The Pybricks Authors
+// Copyright (c) 2020-2023 The Pybricks Authors
 
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import { stop } from '../../../hub/actions';
+import { hubStopUserProgram } from '../../../hub/actions';
 import { HubRuntimeState } from '../../../hub/reducers';
 import { useSelector } from '../../../reducers';
 import ActionButton, { ActionButtonProps } from '../../ActionButton';
@@ -27,7 +27,8 @@ const StopButton: React.VoidFunctionComponent<StopButtonProps> = ({ id }) => {
             tooltip={i18n.translate('tooltip', { key: keyboardShortcut })}
             icon={icon}
             enabled={runtime === HubRuntimeState.Running}
-            onAction={() => dispatch(stop())}
+            showProgress={runtime === HubRuntimeState.StoppingUserProgram}
+            onAction={() => dispatch(hubStopUserProgram())}
         />
     );
 };